Js how to determine the current status text entered - those pits Chinese input method

Copyright Notice: Welcome to reprint, please indicate the original source https://blog.csdn.net/xiaomingelv/article/details/80977402

I am sure you take in peacetime, when demand is sure to encounter such a number of requirements, such as requiring the input box input length limit, restrict the type of input, limit input only English, restrictions can only enter capital letters and so on, this time our general no more than two ideas, one is the pop-specific keyboard, the second is the content of the input match during regular input, and then assign values ​​to input box according to their needs. Pop-up keyboard can be achieved by a particular type attribute input box assignment, but because different browsers to enter the pop-up box has more stringent restrictions, and pop-up after the user can switch, reach the purpose of limiting user input, so Next we focus on the second method.

Speaking generally modify the user's input, the first idea is certainly an event to bind input, input events can be detected each time the user input, such as text entered by the user in real time we want converted to uppercase, the event binding only need to input the following methods

function(e){
e.target.value=e.target.value.toUpperCase()
}

This approach is not entirely wrong for when English input, but once the user switches to Chinese handwriting input or input method, you will find that the question is, input event fires, but every time you captured but e.target.value Chinese is not your input, for example, we execute the following code

document.getElementById('testInput').addEventListener('input',function(e){
        console.log('输入内容：'+e.target.value);
    },false);

You will find that is the case (testing tool: chome, ie tested did not have this problem)

So how do we capture the input state Chinese input method or other input method does not directly reference the following two events

1.compositionstart, event fires before in a paragraph of text input (similar to the  keydown event, but the event is only visible before entering several characters, and these may need to enter the visible characters of a series of keyboard, voice recognition equipment or click input method choice of words)

2.compositionend, when the composition is completed or canceled paragraphs of text, compositionend event will be excited (excited with a special character, it requires a series of keys and other input, such as speech recognition or word on the move recommended)

In simple terms, indirect input methods such as Chinese input start time, compositionstart trigger event, triggered compositionend event at the end, so we cooperate with the input event, will be able to input all of the real-time detection, and sample code as follows

window.onload=function(){
    var doing=false;
    var doSomething=function(e){
        //我要干点啥
    }
    document.getElementById('testInput').addEventListener('compositionstart',function(e){
        doing=true;
    },false);
    document.getElementById('testInput').addEventListener('input',function(e){
        if(!doing){
            doSomething();
        }
    },false);

    document.getElementById('testInput').addEventListener('compositionend',function(e){
        doing=false;
        doSomething();
    },false);
}

Finally, these two events are relatively new, it is not compatible with all browsers, but after testing, currently compatible with most of the mobile terminal browser, test case by case ie9 simulation, chome test passed, Firefox9.0 by the above test

References:

compositionstart related

compositionend related