JavaScript implementation TEXTAREA limit input word count, input box word count real-time statistics update, input box real-time word count mobile end bug Resolution

TextArea is called a text field, also known as a text area, which is a multi-line text input control with a scrollbar, which is often used in the submission form of a Web page. Unlike a single-line TextBox text control, it cannot limit the number of words through the MaxLength property, and it must seek other ways to limit it to meet the predetermined requirements.

The usual practice is to use the # scripting language to implement the word input limit for textarea text fields, which is simple and practical. Assuming we have an TEXTAREA text area with ID txta1, we can limit its keyboard input to 10 characters (kanji or other small-angle characters) with the following code:

JavaScript input box Word count real-time statistics update

As shown in the font calculation of the input box on the major sites are familiar, of course, the PC-side is quite simple to make, as long as the capture keyboard event on the input box to obtain the number of words, and then use the limit words minus the words obtained can be calculated in real-time "how many words can be entered." But on the mobile side This method is still not feasible, first, the PC can use KeyUp or KeyDown for event capture, of course, the mobile can also use them, but on the mobile side of the pinyin input will appear when:

When I enter the pinyin to select my target kanji, the Chinese characters above the keyboard "I am your eldest brother" is not part of the keyboard, so this time click "I am your eldest brother" to choose is not to trigger KeyUp or KeyDown event, then the bottom of the "can also input * *" word "will appear error, There will be bugs as well. I will write the word count on the PC and the word count on the mobile side:

1.pc End Method:

$ ("textarea"). On ("KeyUp",function() {  var textLength = $ ("textarea"). Val ().　　Length　　 var numlength = 500-textLength; $ (". Taketip span"). Text (numlength);})

Is the most commonly used method, which works perfectly on the PC side and is simple.

2. Mobile-side method:

SetInterval (function() {  var textLength = $ ("textarea"). Val (). length;　　 var numlength = 500-textLength; $ (". Taketip span"). Text (numlength);},100)

Because the mobile side of the KeyUp can not trigger the problem, so you can only use the keyboard-related events to capture, using the SetInterval function for real-time monitoring, on the mobile side of the perfect operation.

Here is the Vue version:

Watchwordscount:function () {
    SetInterval (function () {
        var textLength = $ ("textarea"). Val (). length;
        var numlength = 20-textlength;
        if (numlength<=0) {
            $ (". TextArea"). Val ($ (". TextArea"). Val (). substr (0, 20));
            $ (". Nowcount"). html (' <span class= ' red ' > comment exceeds the maximum limit </span> ' + (20));

        }else{
            $ (". Nowcount"). Text (20-numlength);
        }

    },100)
}

Mounted:function() {            this. Watchwordscount ();        },

<textareaID= "Content"class= "textarea"placeholder= "Our Village Advocates free speech"rows= "4"></textarea>        <Divclass= "Textarea-count">            <spanclass= "Nowcount">0</span>/20</Div>

The above method is not very good, because the timer has been open, the following transformation:

The HTML is the same, using the Vue watch method;

Watch: {            function  (val) {                if(val.length>=120) {                      this. Commenttext = Val.substr (0,120);                     this. Nowcount = ' <span class= ' red ' > comment exceeds the maximum limit </span>120 ';                } Else {                    this. nowcount = val.length;}}        } 

JavaScript implementation TEXTAREA limit input word count, input box word count real-time statistics update, input box real-time word count mobile end bug Resolution