ASP.NET TextBox and JavaScript

Suggested Videos
Part 2 - JavaScript confirm on GridView delete
Part 3 - JavaScript to select all checkboxes in GridView
Part 4 - Change gridview row color when checkbox is checked



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>