监听输入框时时输入内容

    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)