Monitor user input across browsers

  In the front-end development, we often face the need to count in input[type=text] or textarea The number of words entered by the user in order to give users a hint of input restrictions, how do we implement cross-browser listener user input in a text box?

For example, we have the following HTML structure, you need to display the number of #textbox words entered in the user #counter :

0

Let's take a look at all the ways in which users can listen for input.

Change Event

var $counter = $ (' #counter '); $ (' #textbox '). On (' Change ', function () { $counter. Text ($ (this). Val (). length); });

chang event is a very common event for form elements that is used to listen for changes in the value of a form element, but in input[type=text] and textarea listens for user input, but there is a big limitation that it triggers only when the focus leaves the text box, but the user experience doesn't call it good, and what we often need is real-time listening.

KeyDown Event/keyup Event

var $counter = $ (' #counter '); $ (' #textbox '). On (' KeyDown ', function () { $counter. Text ($ (this). Val (). length); });

The KeyDown event and the KeyUp event are all listening to the user's keystrokes on the keyboard, except that they are triggered when they are pressed, and when they are lifted, it is clear that the KeyDown experience will be better for our application scenario. But the problem is that you can't listen to all of the user input methods, such as clicking the right mouse button in the text box to eject the menu, delete, undo options.

Input Event/propertychange Event

var $counter = $ (' #counter '); $ (' #textbox '). On (' Input ', function () { $counter. Text ($ (this). Val (). length); });

The input event is a new HTML5 event that listens for user input, and it can listen perfectly to user keystrokes or right-click menus, but the same does not support IE8 and the following versions, However, in the lower version of IE we can listen to the PropertyChange event to achieve the same effect, the code is as follows:

var $counter = $ (' #counter '); $ (' #textbox '). On (' PropertyChange ', function () { Window.event.propertyName = = ' value ' && $counter. Text ($ (this). Val (). length); });

Think two events are listening to Bob, unfortunately, IE9 although both events are supported, but there is also a bug, can not monitor any text to reduce the related input operations, including by the BACKSPACE key, select a text press DELETE key or right-click menu Delete, select a paragraph of text Ctrl+X Cut or right-click menu clipping, Ctrl+Z undo just the Input or right button menu to undo, I have to ask the question, but also to know that it may be in addition to the set Timer cycle view, there is no good way, a while ago in Stackoverfollow happened to see the solution to this problem , now share the scenarios that are compatible with IE9 listening for user input:

var $textbox = $ (' #textbox '); var $counter = $ (' #counter '); $textbox. On (' input ', textchange). On (' Focus ', function () { Document.addeventlistener (' SelectionChange ', textchange); }). On (' Blur ', function () { Document.removeeventlistener (' SelectionChange ', textchange); }); function TextChange () { $counter. Text ($textbox. Val (). length); }

Deleting text in IE9 triggers the document's SelectionChange event, which is the equivalent of listening to events that delete text-related actions.

Compatibility scenarios

The final compatible code is as follows:

var $counter = $ (' #counter '); var $textbox = $ (' #textbox '); var textchange = function () { $counter. Text ($textbox. Val (). length); } var _ie = (function () { var v = 3, div = document.createelement (' div '), all = Div.getelementsbytagname (' i '); while ( div.innerhtml = ' ', ALL[0] ); Return v > 4? V:false; })(); if (_ie && _ie < 9) { $textbox. On (' PropertyChange ', function () { Window.event.propertyName = = ' Value ' && textchange (); }); } else { $textbox. On (' input ', textchange); if (_ie = = 9) { $textbox. On (' Focus ', function () { Document.addeventlistener (' SelectionChange ', textchange); }). On (' Blur ', function () { Document.removeeventlistener (' SelectionChange ', textchange); }); } }