大家都知道“自动提示”，看下面的一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Keyup Event</title>
</head>
<body>
<input type="text" id="autosuggestion" autocomplete="off" />
<div></div>
<script src="keyPress.js"></script>
<script>
var testCase = keyPress({id: ‘autosuggestion‘});
</script>
</body>
</html>
看一下keyPress.js文件
(function(exprots){
var cnt = 0,
callBack = function(){
cnt++;
if(console)
console.log(‘您触发了我‘ + cnt + ‘次‘);
},
keyPress = function(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.0
return 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);
效果如下：
但是问题来了，这段代码实现基本的需求是：每当我们输入一个字符的时候，就会触发“自动提示”，但这不是我们想要的预期结果。
我们预期的结果是：
1.当我们把一个关键字或关键句子输入完毕以后，我们才触发“自动提示”。
2.当我们连续删除输入框内容的时候，不触发“自动提示”，直到我们停止删除这个动作。
那么我们应该用什么样的方法达到我们预期的结果呢？首先我们先来分析一下代码逻辑：
1.每次当我们按下一个按键的时候，那么代码触发“自动提示”，这段代码是没有逻辑问题。
2.那么上面代码逻辑是正确的，但是它的缺点是输入和事件监听是同步的。
举个例子如下：
我们想输入完整的“我爱你”，然后再触发“自动提示”。
我们可以尝试用setTimeout函数延时，即当上一个输入完成后，可以让它延时执行。
这样就实现延时效果了，但是不足的是：按了多少次，还是要执行多少次，只不过每隔一段时间执行罢了。
然而这并不是我们期望的效果，我们想要是在最后输入“你”的时候执行“自动提示”。怎么办？可以采用下面的clearTimeout函数.
看一下keyPress.improve.js文件
(function(exprots){
var cnt = 0,
currentThread = null,
delay = 300,
callBack = function(){
cnt++;
if(console)
console.log(‘您触发了我‘ + cnt + ‘次‘);
},
keyPress = function(option){
var elem = document.getElementById(option.id);
addEvent(elem, ‘keyup‘, function(e){
clearTimeout(currentThread);//清除上一次操作
currentThread = setTimeout(function(){
callBack();
}, delay);//进入排队状态
});
},
addEvent = (function(){
return function(elm, evType, fn, useCapture){
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return 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);
效果图：
期望的效果是达到了，但是我们是否可以让它更完美呢？
接下来我们思考下面几个问题，
- 我们是不是可以去掉有些不符合输入的键值呢？
- 我们是不是可以加入有些组合键值呢？
关于上面的问题，我们下次在讨论研究。
时间： 2025-01-04 08:51:46