<!DOCTYPE html>
<html>
<head>
<title>监听输入框时时输入内容</title>
</head>
<body>
<input type="text" id="search_input">
<script type="text/javascript">
//使用方法
onInputTimer(document.getElementById('search_input'), function(){
//在这里处理时时变化的value
console.log(this.value);
});
/**
* 监听输入框时时输入内容
* @author HOUZHENYU
* @param input dom对象
* @param onFocusCallback 获取焦点时回调 (在这里发请求,回调中的this就是input对象)
* @param onBlurCallback 失去焦点时回调 (回调中的this就是input对象)
*/
function onInputTimer(input, onFocusCallback, onBlurCallback){
// var input = document.getElementById('search_input');
var inputPrevValue = input.value;
input.onfocus=function(){
if(input._searchInputTimer){
clearInterval(input._searchInputTimer);
input._searchInputTimer = null;
}else{
input._searchInputTimer = setInterval(function(){
// console.log(i++);
var currentValue = input.value;
if(inputPrevValue != currentValue){
inputPrevValue = currentValue;
// console.log('发送请求:'+input.value);
onFocusCallback && onFocusCallback.call(input);
}
},100);
}
}
input.onblur=function(){
if(input._searchInputTimer){
clearInterval(input._searchInputTimer);
input._searchInputTimer = null;
onBlurCallback && onBlurCallback.call(input);
}
}
}
</script>
</body>
</html>
监听输入框时时输入内容
最新推荐文章于 2021-03-23 21:13:50 发布