input 框中debounce_input搜索框如何实现防抖?如何实现中文输入?

input搜索框相信大家在开发中用的很多，那么input框输入的事件大家用的是什么呢？大家肯定都使用过oninput或者onchange事件。

oninput

搜索框输入事件，是DOM0级别事件，只要用户输入内容就会触发，即便输入中文输入法还没有将中文汉字填入搜索框内也会一直触发。事件绑定代码示例如下

// DOM0级别事件绑定

dom.oninput = function (e) {

console.log(e);

}

// DOM2级别事件绑定

dom.addEventListenter('input', function (e) {

console.log(e);

});

onchange

搜索框内容变更事件，也是DOM0级别事件，在搜索框内容改变，并且失去焦点的时候触发。注意，它是在失去焦点时才触发的。事件绑定代码如下

// DOM0级别事件绑定

dom.onchange = function (e) {

console.log(e);

}

// DOM2级别事件绑定

dom.addEventListener('change', function (e) {

console.log(e);

});

输入中文如何实现

想必大家发现了，如果我要输入中文该怎么办呢？当在输入法中打字时，我们不希望不断的触发input事件，而是希望在打完并且选择了相应的汉字时才触发事件。

此时我们可以使用compositionstart、compositionupdate和compositionend事件来实现。

compositionstart：在中文输入的开始时触发一次

compositionupdate：在中文输入过程中不断触发，效果类似oninput事件

compositionend：在输入完毕通过输入法选择中文汉字填入搜索框时触发一次

注意：这三个事件是DOM2级别事件，无法通过dom.oncompositionstart = function (e) {}的形式添加，只能通过addEventListener('compositionstart', function (e) {})添加监听处理。可以在start和end事件中，分别在dom对象上添加锁的方式，来限制oninput事件的执行，甚至可以不需要监听input事件。示例如下

var dom = document.getElementById('xx');

dom.oninput = function (e) {

if (!e.target.composing) {

console.log('input');

}

console.log(e);

}

dom.onchange = function (e) {

console.log(e);

}

dom.addEventListener('change', function (e) {

console.log('changed');

});

dom.addEventListener('compositionstart', function (e) {

console.log('start');

e.target.composing = true;

});

dom.addEventListener('compositionend', function (e) {

console.log('end');

e.target.composing = false;

// 手动触发input事件

var event = new Event('input');

e.target.dispatchEvent(event);

});

xx.addEventListener('compositionupdate', function (e) {

console.log('update');

});

至于防抖函数，在我的其他文章内有讲到，不再赘述。

function debounce(fn, delay) {

let timerid;

return function (...args) {

if (timerid) {

clearTimeout(timerid);

timerid = null;

}

timerid = setTimeout(() => {

fn(...args);

timerid = null;

}, delay);

}

}