javascript - js input box word limit problem

Question

js input box limits the number of words in the input box, the following code

<input type='text' onkeyup="checkNumber($(this))">

function checkNumber($this){
    let val=$this.val();
    if(val.length > 10 ){
        alert('字数超过10');
    }
}

During the actual process, the following problems were discovered, as shown in the figure:

In the input method, the letters are displayed first, and then the pinyin of the letters is converted into Chinese characters. Therefore, it may be that when inputting, the number of letters plus Chinese characters exceeds the limited number of characters. How to solve the problem?

高洛峰 · Answer

迷茫 · Answer

oninput="checkNumber($(this))"

代言 · Answer

You don’t need alert, just add a red box after the input box

给我你的怀抱 · Answer

We imagine that the input is also in full English or Chinese, and the length needs to be limited to less than 10, then maxlength="10" is required. The checkNumber function then determines whether the input contains Chinese characters, and if so, determines whether the last character is in English. . If there is no Chinese explanation and it is in pure English, it will prompt you. It is difficult to judge the shortcomings of the plan if both Chinese and English exist together.

ringa_lee · Answer

The following example, I wonder if it will help you




    
    input 事件兼容处理以及中文输入法优化

曾经蜡笔没有小新 · Answer

Replace the onkeyup event with the onblur event to solve the problem.