ASP NET TextBox and JavaScript04:33

  • 0
Published on March 27, 2017

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

In this video we will discuss
1. JavaScript focus method
2. JavaScript select method
3. How to count the number of characters as you type in a textbox and display that count in a label control

JavaScript focus method : focus() method is used to put the keyboard cursor in a particular textbox when the web page loads so that we can start typing without having to first click in the textbox with the mouse.

For example, when a web page with the following HTML and JavaScript is loaded, the keyboard cursor is already in the textbox waiting for the user to type his input. There is no need for the user to first click in the textbox with his mouse.

Name : [asp:TextBox ID=”TextBox1″ runat=”server”][/asp:TextBox]
[script type=”text/javascript”]
document.getElementById(“TextBox1″).focus();
[/script]

focus() method can be used with most HTML elements. For example, when a web page with the following HTML and JavaScript is loaded, the keyboard focus is set to DropDownList1 control. You can change the Gender value in the DropDownList by pressing ALT + Down Arrow keys simultaneously. Since we are using focus() method there is no need to first click on the DropDownList with the mouse.

[table style=”border:1px solid black”]
[tr]
[td]Name[/td]
[td][asp:TextBox ID=”TextBox1″ runat=”server”][/asp:TextBox][/td]
[/tr]
[tr]
[td]Gender[/td]
[td]
[asp:DropDownList ID=”DropDownList1″ runat=”server”]
[asp:ListItem Text=”Male” Value=”Male”][/asp:ListItem]
[asp:ListItem Text=”Female” Value=”Female”][/asp:ListItem]
[/asp:DropDownList]
[/td]
[/tr]
[/table]

[script type=”text/javascript”]
document.getElementById(“DropDownList1″).focus();
[/script]

JavaScript select method : select() method is used to select the contents of a text field, so when you start typing, the new text that you have typed will automatically replace the existing selected text. You can use select() method with textbox and textarea controls.

When a web page with the following HTML and JavaScript is loaded, the text in the textarea element is selected and when you start typing, the new text that you typed will replace the existing selected text.

[table style=”border:1px solid black”]
[tr]
[td]Name[/td]
[td][asp:TextBox ID=”TextBox1″ runat=”server”][/asp:TextBox][/td]
[/tr]
[tr]
[td]Comments[/td]
[td]
[asp:TextBox ID=”TextBox2″ TextMode=”MultiLine” runat=”server”
Text=”Type your comments here”][/asp:TextBox]
[/td]
[/tr]
[/table]

[script type=”text/javascript”]
document.getElementById(“TextBox2″).select();
[/script]

How to count the number of characters as you type in a textbox and display the count in a label control

Name :
[asp:TextBox ID=”TextBox1″ runat=”server” onkeyup=”CountCharacters();”]
[/asp:TextBox]
[asp:Label ID=”Label1″ runat=”server”][/asp:Label]
[script type=”text/javascript”]
function CountCharacters()
{
document.getElementById(“Label1”).innerHTML =
document.getElementById(“TextBox1″).value.length + ” charactes”;
}
[/script]

Enjoyed this video?
"No Thanks. Please Close This Box!"