locked
Set Maximum characters to 1000 for multiline textbox using jQuery RRS feed

  • Question

  • User-73514677 posted

    Hi,

    I have a asp:Textbox which has TextMode as "MultiLine". I want to restrict the number of characters to 1000 (key in and data paste) , and also the span chararcter count should reduce based on the characters.

    <asp:Textbox ID="txtMult" runat="Server" TextMode="MultiLine" />
    <span id="spntxtMult" Number of characters 0/1000 />

    How to achieve this using jQuery?

    Thanks 

    Friday, June 3, 2016 11:13 AM

Answers

  • User2103319870 posted

    I want to restrict the number of characters to 1000 (key in and data paste) , and also the span chararcter count should reduce based on the characters.

    <asp:Textbox ID="txtMult" runat="Server" TextMode="Mu

    You can try with the below code

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    //Assign the text to span in pageload
                    $('#spntxtMult').text("Number of characters 0/1000");
                    //attach change event to div
                    $('#txtMult').keyup(function (event) {
                        //call function to calcualate count on change event of div
                        textCounter();
                    });
                });
                function textCounter() {
                    //Get the max length countnt
                    var divlength = $('#txtMult').val().length;
                    //check if count greater than 1000
                    if (divlength > 1000) {
                        //Trim the text
                        var trimmedtext = $('#txtMult').val().substring(0, 1000);
                        //assign it to textbox
                        $('#txtMult').val(trimmedtext);
                    }
                    else {
                        var remaningchar = 0;
                        //Calculate the remining char
                        if (divlength > 0) {
                            remaningchar = 1000 - divlength;
                        }
    
                        //reduce the allowed no of characters in span
                        $('#spntxtMult').text("Number of characters " + remaningchar + "/1000");
                    }
                }
            </script>
            <asp:TextBox ID="txtMult" runat="Server" TextMode="MultiLine" />
            <span id="spntxtMult"></span>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 3, 2016 1:41 PM

All replies

  • User475983607 posted
        <script type="text/javascript">
            $(document).ready(function () {
                $('textarea').keypress(function (e) {
                    maxChars = 1000;
                    if ($('textarea').val().length >= maxChars) {
                        e.preventDefault();
                    }
                });
            });
        </script>

    Friday, June 3, 2016 1:29 PM
  • User2103319870 posted

    I want to restrict the number of characters to 1000 (key in and data paste) , and also the span chararcter count should reduce based on the characters.

    <asp:Textbox ID="txtMult" runat="Server" TextMode="Mu

    You can try with the below code

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    //Assign the text to span in pageload
                    $('#spntxtMult').text("Number of characters 0/1000");
                    //attach change event to div
                    $('#txtMult').keyup(function (event) {
                        //call function to calcualate count on change event of div
                        textCounter();
                    });
                });
                function textCounter() {
                    //Get the max length countnt
                    var divlength = $('#txtMult').val().length;
                    //check if count greater than 1000
                    if (divlength > 1000) {
                        //Trim the text
                        var trimmedtext = $('#txtMult').val().substring(0, 1000);
                        //assign it to textbox
                        $('#txtMult').val(trimmedtext);
                    }
                    else {
                        var remaningchar = 0;
                        //Calculate the remining char
                        if (divlength > 0) {
                            remaningchar = 1000 - divlength;
                        }
    
                        //reduce the allowed no of characters in span
                        $('#spntxtMult').text("Number of characters " + remaningchar + "/1000");
                    }
                }
            </script>
            <asp:TextBox ID="txtMult" runat="Server" TextMode="MultiLine" />
            <span id="spntxtMult"></span>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 3, 2016 1:41 PM
  • User-1636183269 posted

    Venkat,

    You can create javascript function which you can kept on keyup.

    http://anup-anuphosur.blogspot.in/2009/04/setting-maxlength-in-multiline-textbox.html

    Saturday, June 4, 2016 11:42 AM
  • User61956409 posted

    Hi venkatzeus,

    I have a asp:Textbox which has TextMode as "MultiLine". I want to restrict the number of characters to 1000 (key in and data paste) , and also the span chararcter count should reduce based on the characters.

    You could try to use some jQuery Character and Word counter plugins, which could limit characters/words on text input.

    https://github.com/qwertypants/jQuery-Word-and-Character-Counter-Plugin

    https://github.com/ractoon/jQuery-Text-Counter

    Best Regards,

    Fei Han

    Monday, June 6, 2016 5:31 AM