监听输入框时时输入内容

最新推荐文章于 2023-02-02 23:31:55 发布

goinni

最新推荐文章于 2023-02-02 23:31:55 发布

阅读量599

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/goinni/article/details/53519572

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

goinni

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
监听输入框时时输入内容

<!DOCTYPE html><html><head> <title>监听输入框时时输入内容</title></head><body><input type="text" id="search_input"><script type="text/javascript"> //使用方法 onInputTimer(document.getElementB
复制链接

扫一扫