We all know "auto tip" and look at one of the following sample code:
<! DOCTYPE html>
Check out the Keypress.js file
(function (exprots) {var cnt = 0,callback = function () {cnt++;if (console) Console.log (' You triggered me ' + cnt + ');},keypress = Funct Ion (option) {var elem = document.getElementById (option.id); Addevent (Elem, ' KeyUp ', function (e) {callBack ();});}, Addevent = (function () {return function (Elm, Evtype, FN, usecapture) {if (Elm.addeventlistener) {Elm.addeventlistener ( Evtype, FN, usecapture);//dom2.0return true;} else if (elm.attachevent) {var r = elm.attachevent (' on ' + Evtype, fn);//ie5+return R;} else {elm[' on ' + evtype] = fn;//dom 0}};}) (); exprots.keypress = keyPress;}) (window);
The effect is as follows:
650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/5B/47/wKiom1UD8ziDFvPIAAFsFCa46LA251.jpg "style=" float: Left; "title=" 1.jpg "alt=" Wkiom1ud8zidfvpiaafsfca46la251.jpg "/>
But the problem is that the basic requirement of this code is that the "auto prompt" is triggered whenever we enter a character, but this is not the expected result we want.
The results we expect are:
1. When we have entered a keyword or key sentence, we will trigger the "Auto Prompt".
2. When we delete the contents of the input box continuously, we do not trigger "auto prompt" until we stop deleting the action.
So what kind of approach should we use to achieve the results we expect? Let's start by analyzing the code logic:
1. Every time when we press a button, then the code triggers "Auto Prompt", this code is no logical problem.
2. The above code logic is correct, but its disadvantage is that input and event monitoring are synchronous.
Here's an example:
We want to enter the full "I love you" and then trigger "Auto Prompt".
We can try to use the SetTimeout function delay, that is, when the previous input is complete, it can be delayed execution.
This will achieve the delay effect, but the insufficient is: how many times, or how many times to execute, but every once in a while to execute.
However, this is not the effect we expect, we want to be the last to enter "You" when the "Automatic prompt." What to do? You can use the following cleartimeout function.
Check out the KeyPress.improve.js file
(function (exprots) {var cnt = 0,currentthread = Null,delay = 300,callback = function () {cnt++;if (console) Console.log (' You triggered me ' + cnt + ');},keypress = function (option) {Var elem = document.getelementbyid (option.id); Addevent (elem, ' KeyUp ', function (e) {cleartimeout (CurrentThread);//Clear Last action CurrentThread = settimeout (function () {callBack ();}, delay);//Enter the queued state});},addevent = (function () { Return function (elm, evtype, fn, usecapture) {if (Elm.addeventlistener) { Elm.addeventlistener (evtype, fn, usecapture);//dom2.0return true;} else if (elm.attachevent) {var r = elm.attachevent (' on ' + evType, &NBSP;FN);//ie5+return r;} else {elm[' on ' + evtype] = fn;//dom 0}}}) (); exprots.keypress = keypress;}) (window);
:
650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/5B/47/wKiom1UD9NvigdP3AAEXIUmL8VI708.jpg "title=" 2.jpg " alt= "Wkiom1ud9nvigdp3aaexiuml8vi708.jpg"/>
The desired effect is achieved, but can we make it more perfect?
Next we think about the following questions,
Can we remove some non-conforming input key values?
Can we add some combination key values?
On the above question, we are discussing the study next time.
This article from "Shoppa" blog, declined reprint!
JavaScript Asynchronous (one) automatic prompt display column