input标签监听事件，搜索框精确查找案例

最近在写一个手机端提交表单的项目，里面用了不少input标签，因为项目不太忙，所以，想做的完美点，但是遇到了一些问题，比如：页面中的必填项如果有至少一项为空，提交按钮就是不能提交的状态，所以需要对所有的input内容进行监听，刚开始我用了jquery的keyup事件解决问题，但是后来测试出一个bug，如果用户选择粘贴复制的话，keyup事件不能触发，也就不能通过判断input内容来改变提交按钮的状态。下面就这种问题做下总结，希望对自己和他人以后能有点帮助。

1.onfocus 当input 获取到焦点时触发

2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js

3.onchange 当input失去焦点并且它的value值发生变化时触发

4.onkeydown 在 input中有键按住的时候执行一些代码

5.onkeyup 在input中有键抬起的时候触发的事件，在此事件触发之前一定触发了onkeydown事件

6.onclick 主要是用于 input type=button，当被点击时触发此事件

7.onselect 当input里的内容文本被选中后执行一段，只要选择了就会触发，不是非得全部选中

8.oninput 当input的value值发生变化时就会触发，不用等到失去焦点（与onchange的区别）

var inp = document.getElementsByClassName("input类名")[0];
inp.oninput = function(){}

以下是一个输入文字查找对应的案例和视频

	let arr = [{name:"酱爆"}];
    let inp = document.getElementsByClassName("search")[0];
    inp.oninput = function(){
        let data = [];
        for (let i = 0; i < arr.length; i++) {
            for (let key in arr[i]) {
                if (String(arr[i][key]).indexOf(inp.value) > -1) {
                    data.push(arr[i]);
                    break;
                }
            }
        }
        sorts(data);
    }

    function sorts(lists){
        let str = "";
        for(let i = 0 ; i < lists.length; i++){
            str += `<li class="promptGame_li">
                <div class="promp_l"><i class="iconfont icon_geme"></i></div>
                <div class="promp_r"><h3 class="promp_h3">${lists[i].subject}</h3>
                <span>热度<i class="iconfont hot_icon"></i></span></div>
                </li>`;
        }
        document.getElementsByClassName("promptsubject_ul")[0].innerHTML = str;
    }

搜索框精确查找

好了，今天的酱爆小课堂下课了，每天学习一个小技巧，喜欢一键三连吧(▽)