CODEWITHSUNDEEP
c#javascriptjqueryasp.net
niru dyogi
niru dyogi

Reputation: 639

I want to hide label whenever something is typed in text box in aspx page

I want to hide label, whenever something is typed in text box in aspx page.

I am trying something like this :

protected void txt_LastName_KeyPress(object sender, EventArgs e)
{
    Label_msg.Visible = false;
}
protected void txt_LastName_KeyDown(object sender, EventArgs e)
{
    Label_msg.Visible = false;
}

But it is not happening. Do I need to write something like this in focus event?

Upvotes: 1

Views: 3985

Answers (7)

Ashraf Sada
Ashraf Sada

Reputation: 4905

Because there is no KeyPress Event in ASP.Net forms unlike Winforms you must use JQuery short hand code (for JavaScript) to handle hiding your label when user is typing in the textbox like this example:

<script>
    $(document).ready(function () {
        $("#txtUserName").keypress(function () {
            $("#lblUser").hide();
        });
    });
</script>

Upvotes: 1

th1rdey3
th1rdey3

Reputation: 4358

a simple javascript solution would be

HTML

<span id="one">text</span>
<input type="text" onkeypress="hide()" />

Javascript

var isHidden = false;
function hide(){
  if(!isHidden){
   isHidden = true; 
   document.getElementById("one").setAttribute("style","display:none");
  }
}

jsbin demo

Upvotes: 1

Alexandre Rondeau
Alexandre Rondeau

Reputation: 2687

You need javascript

Here is an implementation using jQuery

<script>
    $('#txt_LastName').focus(function() {
        $('#Label_msg').hide();
    });
    $('#txt_LastName').blur(function() {
        $('#Label_msg').show();
    });
</script>

A plain vanilla javascript solution would be

<script>
    document.getElementById("txt_LastName").onfocus = function() {
        document.getElementById("Label_msg").style.display = 'none';
    };
    document.getElementById("txt_LastName").onblur = function() {
        document.getElementById("Label_msg").style.display = 'inherit';
    };
</script>

Upvotes: 4

PushCode
PushCode

Reputation: 1439

you can do some thing simple as below:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function hideOnKeyPress() {
            document.getElementById('lblHidden').style.display = 'none';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtMaintCost" onkeypress="hideOnKeyPress(); return true;" runat="server"></asp:TextBox>
        <asp:Label ID="lblHidden" runat="server" Text="I'll hide when you type something in the text box" />
    </div>
    </form>
</body>
</html>

Upvotes: 1

PaulShovan
PaulShovan

Reputation: 2134

This one may be helpful for you. Do as following...

Firstly, Set Textbox's AutoPostBack Property to true

AutoPostBack="True"

Then, Use OnTextChanged Event

protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        Label1.Visible = false;
    }

Upvotes: 2

Karl Anderson
Karl Anderson

Reputation: 34846

You may want to look into a JavaScript MVVM library, such as KnockoutJS, like this:

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /></p>
<p>You have typed: <span data-bind="text: someValue"></span></p>

// Here's my data model
var viewModel = {
    someValue: ko.observable("edit me")
};

ko.applyBindings(viewModel); // This makes Knockout get to work

Here is a jsFiddle to illustrate how easy it is to achieve your desired key down functionality with JavaScript via KnockoutJS.

Upvotes: 1

user2897701
user2897701

Reputation:

You can't change the visibility of a layer event based server side. You have to put this into a javascript procedure.

You have to possibilities: The easy way is, to use jQuery (you need to include jQuery!):

<script type="text/javascript">
$(function() {
    $('#txt_LastName').focus(function() {
        $('#Label_msg').hide();
    });
    $('#txt_LastName').blur(function() {
        $('#Label_msg').show();
    });
}
</script>

Second method: do it the hard way If you don't want to use jQuery for some reason, you have to work directly with the DOM. You can read about it there: W3Schools DOM Methods

Upvotes: 1

Related Questions