How to Count Characters in a Textbox using JavaScript in ASP.NET

Count Characters in a Textbox using JavaScript in ASP.NET

Textbox type the some character now want to restrict the character then using javascript count character remove  the specified characters in Asp.Net.

                                       DEMO

              

                               Javascript

 <script type="text/javascript">
        function CountRemove() {
            var txt = document.getElementById("TextBox2").value;
            document.getElementById("Label2").innerHTML = document.getElementById("TextBox2").value.length + " Characters";
            if (document.getElementById("TextBox2").value.length >= 10) {
                document.getElementById("TextBox2").value = txt.substring(0, txt.length - 1);
            }
        }
        function Count() {
            document.getElementById("Label1").innerHTML = document.getElementById("TextBox1").value.length + " Characters";

        }

</script>

                                       HTML

<html>
<head runat="server">
    <title>How to Count Characters in a Textbox using JavaScript in ASP.NET</title>
    <script type="text/javascript">
        function CountRemove() {
            var txt = document.getElementById("TextBox2").value;
            document.getElementById("Label2").innerHTML = document.getElementById("TextBox2").value.length + " Characters";
            if (document.getElementById("TextBox2").value.length >= 10) {
                document.getElementById("TextBox2").value = txt.substring(0, txt.length - 1);
            }
        }
        function Count() {
            document.getElementById("Label1").innerHTML = document.getElementById("TextBox1").value.length + " Characters";

        }

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <table><tr><td></td><td>
    <asp:TextBox ID="TextBox1" runat="server" onkeyup="Count();">
</asp:TextBox>
<asp:Label ID="Label1" runat="server" ForeColor="#CC3300"></asp:Label>
            </td></tr>
            <tr><td></td><td>
  <asp:TextBox ID="TextBox2" runat="server" placeholder="Allow 10 Characters" onkeyup="CountRemove();">
</asp:TextBox>
<asp:Label ID="Label2" runat="server" ForeColor="#FF3399"></asp:Label>

                </td></tr>
        </table>

    </div>
    </form>
</body>

</html>


First - Add new webform - place the required textbox and label  - textbox onkeyup=call javascript function






Javascript function  call the textbox value from getElementId - and access from the appropriate textbox length








0 comments:

Post a Comment