监听输入框时时输入内容

xiaoxiao2021-12-15 20

<!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>

转载请注明原文地址: https://ju.6miu.com/read-1000327.html

专利

最新回复(0)