How to show quick text change

[jagdeep gupta]

Hi friends please guide me how to show the quick changing text as like shown in text editor of mobile phone(While message writing it shows no of characters left)

[Frinavale]

To implement this solution you will have to use JavaScript.

You will write a method that checks the length of a String in a TextBox and subtracts that value from the MaxLength of the TextBox...then displays the result in a Label.


For example, the following JavaScript will retrieve the text in the TextBox and subtract it's length from the TextBoxes MaxLength...and then display the result in an ASP.NET Label:

 
<!-- This is all in your ASPX page -->
<asp:TextBox ID="myTextBox" runat="server" MaxLength="12"></asp:TextBox>
<asp:Label ID="numCharsLeftLabel" runat="server"></asp:Label>
 
<script type="text/javascript">
function DisplayNumberOfCharactersLeft(textBox)
{
  if(textBox)
  {
    var textLength = Number(textBox.value.length);
    var maxLength = textBox.maxLength;
    var numCharsLeft = maxLength - textLength;
    var label = document.getElementById("<%=numCharsLeftLabel.ClientID%>");
    if(label)
    {
      label.innerHTML = numCharsLeft;
    }
  }
}
</script>

In your sever side code you have to specify that the TextBox should call the DisplayNumberOfCharactersLeft JavaScript method (passing it a reference to itself) during the JavaScript onkeyup event...like this:
[vb.net]

myTextBox.Attributes.Add("onkeyup","DisplayNumberOfCharactersLeft(this);")

[c#]

myTextBox.Attributes.Add("onkeyup","DisplayNumberOfCharactersLeft(this);");

Put this code in the Page Load event or in the Page PreRender event. You only have to apply it once unless you're placing it in an UpdatePanel.

-Frinny

[jagdeep gupta]

Thanks a lot frinny.
But i cant understand if how to use inner html and onkeyup property for textbox

[NeoPa]

Jagdeep, have you tried following the simple instructions given?

I don't develop for .NET, but I think I could follow those instructions easily enough. It's hard to know what more you could need.

[Frinavale]

Jagdeep,

JavaScript works with HTML elements. So, you have to know what HTML elements are used to render the ASP.NET controls in order to work with them in JavaScript.


An ASP.NET Label control is rendered as an HTML <span> element. The String that you set for the Label.Text property is placed in between the opening and closing span tags.

For example, if you have declared the following Label like so:

<asp:Label ID="myLabel" Text="This is the text for myLabel" runat="server" />

It is rendered like this (if you right click on the browser and click "view code" you will see the HTML for the page...)

<span id="myLabel" name="myLabel">
  This is the text for myLabel
</span>

A reference to an HTML-span in JavaScript does not have Text or Value properties that you can set; but, you can access what is between the opening and closing span tags by accessing the span's innerHTML property.

So, in this code, I retrieve a reference to the ASP.NET-Label/HTML-span-element using the JavaScript document.getElementByID method and I am setting the text that is displayed by element by setting the element's innerHTML property:

 var label = document.getElementById("<%=numCharsLeftLabel.ClientID%>");
    if(label)
    {
      label.innerHTML = numCharsLeft;
    }

Now, you my be confused by the <%=numCharsLeftLabel.ClientID%> part of this code. Anything between <% and %> is executed on the server... And <%= is sort hand for <%Response.Write()%>...which will print a String into the place where the code exists.

So this:

<%=numCharsLeftLabel.ClientID%>

Prints the ClientID string property of the numCharactersLeftLabel ASP.NET label into the JavaScript code.

The ClientID property of a Label (or any other web control) gives you access to the ID that is assigned to the HTML element that represents the ASP.NET control in the browser.

Sometimes the ID of the ASP.NET controls do not match the ID of the HTML elements that represent them in the browser.

For example, this happens if you have a Label or TextBox or something in a TemplateField within a GridView control.

Since the GridView has many rows there would be multiple HTML elements rendered using with the same ID... but ASP.NET gives the HTML elements a unique ID based on the one assigned to the ASP.NET control.

(HTML elements must have unique IDs or else the page is invalid).

This also happens if you have controls within a User Control...or if you're using Master Pages.

In order to retrieve a reference to the HTML element that you want to work with using JavaScript you need to know the unique-id given to the HTML element that represents the ASP.NET control when it is rendered. You can do this using the ClientID property of controls.

So, referring to this:

 var label = document.getElementById("<%=numCharsLeftLabel.ClientID%>");

The <%=numCharsLeftLabel.ClientID%> is executed on the server and prints the unique id of the HTML-span element that represents the numCharsLeftLabel ASP.NET Label into the JavaScript code.

This means that when this JavaScript is viewed in the browser it will look something like this:

var label = document.getElementById("numCharsLeftLabel");

The JavaScript document.getElementById method returns a reference to the span element (DOM) that is the Label control. And, as I mentioned before, you can use that reference to set the text by setting the innerHTML property for the span-element...

As for the onkeyup event.
I'm not sure what to say......
It is fired when the key pressed on the keyboard comes UP from being pressed. In other words, it is fired when someone types anything while focused on the element.

Um... yeah.
I think that's about it.

-Frinny

[jagdeep gupta]

Thanks A Lot Frinny