JavaScript to select all text in Asp.Net and HTML TextBox on click or focus

Introduction: In this article I will show with an example to select all text in Asp.Net textbox, multiline textbox, HTML input and textarea control on single click or focus using javascript.

JavaScript to select all text in Asp.Net and HTML TextBox on click or focus.
In previous articles i explained How to calculate running total of textbox values and show in label or textbox using jQuery and Jquery to expand or resize multiline textbox on mouse over and mouse out and Highlight asp.net or html textbox on mouse hover using jquery and Jquery to dynamically change or set placeholder text in asp.net textbox and Jquery UI autocomplete textbox with database in asp.net



Description: While working on Asp.Net project I got the requirement to select all text in textbox on single click or we can say on getting focus in textbox. I have used simple javascript select and focus method for this purpose. I have mentioned two ways to select the text inside textbox. You can pick any of the two.

Implementation: Let’s create a web page for demonstration purpose:

HTML source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function selectAllText(senderId) {
            document.getElementById(senderId).focus();
            document.getElementById(senderId).select();
        }
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>         
               <asp:TextBox ID="TextBox1" runat="server" Width="250px" Text="Dummy text in Asp.Net Textbox" onclick="selectAllText(this.id)"></asp:TextBox><br />
        <asp:TextBox ID="TextBox2" runat="server" Text="This is dummy text in Asp.Net Multiline Textbox" TextMode="MultiLine" Rows="3" Columns="33" onclick="selectAllText(this.id)"></asp:TextBox><br /><br />
        <input type="text" id="txt1" style="width:250px;" value="Dummy text in HTML input control" onclick="selectAllText(this.id)" /><br />
        <textarea rows="3" id="txt2" cols="33" onclick="selectAllText(this.id)">This is dummy text in HTML textarea</textarea>

Another Simple Way:

        <asp:TextBox ID="TextBox1" runat="server" Width="250px" Text="Dummy text in Asp.Net Textbox" onclick="this.focus();this.select()"></asp:TextBox><br />
        <asp:TextBox ID="TextBox2" runat="server" Text="This is dummy text in Asp.Net Multiline Textbox" TextMode="MultiLine" Rows="3" Columns="33" onclick="this.focus();this.select()"></asp:TextBox><br /><br />
        <input type="text" id="txt1" style="width:250px;" value="Dummy text in HTML input control" onclick="this.focus(); this.select()" /><br />
        <textarea rows="3" id="txt2" cols="33" onclick="this.focus();this.select()">This is dummy text in HTML textarea</textarea>      
    </div>
    </form>
</body>
</html>


  Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.         
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..