Preface
Recently, the product needs to make a lot of input boxes. The interactive effect the product wants is: the user can enter Chinese and English, and as the user input enters, the number of characters that have been entered can be displayed in real time. When the quantity limit exceeds the limit, the input box border turns red, and the user is prompted for information.
This interaction sounds like no problem, and there seems to be no difficulty in technical implementation. But when I realized it, I encountered the Chinese input method and found that there were pitfalls.
What a trick, let's see below~~
Real-time monitoring of the content length of the input box, the pit encountered is used to monitor oninput event.
There are 2 benefits of using this oninput event:
When the user changes the content of the input box by right-clicking, he can be heard;
This event will only be triggered when the content of the input box changes. For example, this event will not be triggered when the user presses the control character keys such as the arrow keys, control / shift , etc.;
The effect is perfect when you enter English characters or numbers, and even when you正常输入中文. But when you非正常输入中文a bug will occur. What is abnormal input like? See the following example picture:
Have you seen it? In this Chinese input method, the user has not entered the Chinese he wants to enter, but has just entered a few pinyin, but input event was triggered, and the input box value listened to is actually d'd'd , not only the pinyin characters, but also the separated points. If the length of the input box content is limited to no more than 5, then in the case of screenshot, the user will be prompted to字符长度超过限制！ . Of course, such interactive effects are not what the product wants.
Use onkeydown / onkeypress / onkeyup events to listen
The disadvantage of these events is that they cannot listen to the input content copied from the right-click, but will there be the same problem as input event?
I have done several experiments and found that keydown and keyup will encounter the same problems as input , but keypress does not have this problem, because in the Chinese input state, keypress will not trigger, not only will it not trigger during the process of entering the pinyin, but it will not trigger after you select the Chinese language you want to enter such as "right, right, right". Then when "right, right, right" is entered, although the character limit is exceeded,字符长度超过限制！ Tips for .
A compromise solution
In order to monitor the length of content in real time and to ensure that there are no bugs in the Chinese input method, I have been struggling for a long time and finally found that I can’t do it! (If any hero is found, please tell me~~).
So in the end, the user experience was sacrificed and a compromise was found: the input box lost its focus (i.e., blur ), or the user only checked the content length when the input key was entered. Of course, if you find that the content of the input box exceeds the limit, you should keep the cursor in the input box to facilitate user modification.
Alas,用户输入回车键时才进行内容长度的检测and the pitfalls he has been planted before.
How to detect that the Enter key is entered in the input box
In fact, this is a very common interaction. For example, when modifying the name, it supports the user to enter and save directly after entering the carriage, and when logging in, it supports the user to enter and log in directly after entering the carriage. But the pitfall to be careful is: **中文输入法下按回车键来输入英文字符** .
Examples of the process of pressing the Enter key to enter English characters under the Chinese input method:
For example, if I want to enter the account to log in, my account is in all English. I am currently in the Chinese input method, but I am too lazy to switch the input method, so I directly typed my account (all English characters). At this time, Sogou input method prompted me a large string of Chinese, and then I pressed Enter, and the input box entered the English characters I wanted.
In this case, although the user entered the Enter key, the user pressed the Enter key just to enter English characters under the Chinese input method. This Enter key is not the Enter key we want to monitor. So how to rule out the Enter key in this case?
Generally speaking, when listening to the Enter key, we will use keydown event or keyup event, and the implementation code is as follows. So can both methods filter out the Enter keys that we don't want to listen to?
//Method 1: Use keydown event input.onkeydown = function(e){ if(e.keyCode == 13){ //The user inputs the Enter key//dos related operations}}//Method 2: Use keyup event input.onkeyup = function(e){ if(e.keyCode == 13){ //The user inputs the Enter key//dos related operations}} After experiments, it was found that using keydown can successfully filter, but using keyup cannot.
So let’s see why?
This is because in the keydown event: the key Enter key entered in the Chinese input method state, the detected keyCode is 229 instead of 13 ; when simply entering a return, keyCode is 13 .
In the keyup event: keyCode detected by inputting the Enter key in the Chinese input method state is 13 ; when simply entering a Enter, keyCode is also 13 .
The following figure is the result I printed in the console: (see here for the code example)
Conclusion
Several events involved in the input box: keydown/keyup/keypress/input/change
View here: //www.VeVB.COM/article/21237.htm