'Count characters from 3 textboxes

I need count and limit characters in 3 textboxes. I can`t have more chars than 60 in all the textboxes included. Thats my code.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    function textCounter(field, countfield, maxlimit) {
        if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit);
        else
            countfield.value = maxlimit - field.value.length;
    }
</script>
<asp:TextBox ID="TextBox1" ClientIdMode="static" TextMode="MultiLine"  Width="200px" Rows="3" runat="server"  onkeyup="textCounter(TextBox1, this.form.remLen, 60);" onkeydown="textCounter(TextBox1, this.form.remLen, 60);" /><br/>
    <asp:TextBox ID="TextBox2" ClientIdMode="static" TextMode="MultiLine"  Width="200px" Rows="3" runat="server"  onkeyup="textCounter(TextBox2, this.form.remLen, 60);" onkeydown="textCounter(TextBox2, this.form.remLen, 60);" /><br/>
    <asp:TextBox ID="TextBox3" ClientIdMode="static" TextMode="MultiLine"  Width="200px" Rows="3" runat="server"  onkeyup="textCounter(TextBox3, this.form.remLen, 60);" onkeydown="textCounter(TextBox3, this.form.remLen, 60);" /><br/>
<input readonly="readonly" type="text" name="remLen" size="3" maxlength="3" value="60" /> characters left
</asp:Content>
javascriptc++sharphtmlasp.net


Solution 1:[1]

The way you do it you check the current textbox. You can add comman class to all textboxes, for example "textBoxes", then add this to your code.

<script>
const MAX_LENGTH = 60;
let currentCount = 0;
   document.querySelectorAll('.textBoxes').forEach(el => {
       el.addEventListener('keypress', function(e) {
           //Here you can check if the user clicked BackSpace to decrease the counter
           if(currentCount >= 60){
               e.preventDefault();
               return;
           } else {
             currentCount++;
           }
       })
   })
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions