Real-time monitoring of changes in mobile input boxes

<span id="Label3"></p><p><p></p></p><p><p>A common requirement for real-time monitoring of textarea input changes and how many characters can be entered on the Page.</p></p><p><p>Two form errors were doubled during the development process:</p></p><p><p>1. Use only onkeyup Events</p></p><p><p>2, when using Zepto binding event, empiricism Error</p></p><p><p></p></p><p><p></p></p><p><p>Third-party Input method when entering pinyin, and did not write the input characters directly in the input box, but in the method above the temporary, only select the word to fill in the textarea input box, this time is not heard keyboard events, so completely dependent on the KeyUp event, There is no way to accurately obtain the number of characters entered, so only listen to other events, HTML5 new event Oninput perfect solution to this bug, but when I check its compatibility, http://caniuse.com/#search =oninput gives the compatibility List is:</p></p><p><p></p></p><p><p>iOS version is only compatible to 9.3, Android 4.4 is a bit sad.</p></p><p><p>But the actual detection, using the iphone5s, version 7.0 is also able to correctly monitor the input Event.</p></p><p><p>The second error is more of an empirical error,</p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">$ (function () { var wordCount = 0, totalcount = $, remaining = totalcount-wordcount; $ (' #overage '). text (remaining); $ (' TextArea '). on <span style="color: #ff0000">(' input, focus, keyup '</span>, function (ev) { wordCount = $.trim ($ (this). val ()). length; Remaining = totalcount-wordcount; If (remaining <= 0) { $ (this). val ($ (this). val (). slice (0, totalcount)); $ (' #overage '). text (0); } Else { $ (' #overage '). text (remaining); } Ev.stoppropagation (); }); })</pre></pre><p><p>I guess a lot of people will be like me, can't see where the mistake is?</p></p><p><p>In fact, Zepto includes jquery using on to bind multiple events, with the middle being separated by a space instead of a comma.</p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">$ (function () { var wordCount = 0, totalcount = $, remaining = totalcount-wordcount; $ (' #overage '). text (remaining); $ (' textarea '). on (' input focus KeyUp ', function (ev) { wordCount = $.trim ($ (this). val ()). length; Remaining = totalcount-wordcount; If (remaining <= 0) { $ (this). val ($ (this). val (). slice (0, totalcount)); $ (' #overage '). text (0); } Else { $ (' #overage '). text (remaining); } Ev.stoppropagation (); }); })</pre></pre><p><p>　　</p></p><p><p></p></p><p><p>Real-time monitoring of changes in mobile input boxes</p></p></span>