监听文本框输入 Firefox、Chrome、IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件。 oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。 onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)(仅 IE 支持)。 backspace、delete 两个按键的 keyCode 分别为 8、46。 oncut 事件在粘贴(ctrl + v)、鼠标粘贴时触发。
var input = document.getElementById("test");
function fn() {
console.log(input.value.length) // 你要执行的代码
}
if (window.addEventListener) { //先执行W3C
input.addEventListener("input", fn, false);
} else {
input.attachEvent("onpropertychange", fn);
}
if (window.VBArray && window.addEventListener) { //IE9
input.attachEvent("onkeydown", function() {
var key = window.event.keyCode;
(key == 8 || key == 46) && fn(); //处理回退与删除
});
input.attachEvent("oncut", fn); //处理粘贴
}
在上面的代码中,可以看到,在JS中有oninput这样的事件,文本框的输入、退格、空格、粘贴等操作均能触发,利用这个事件就可以动态捕捉用户的输入情况。记得以前做动态监测输入,都是用onkeydown或onkeyup,太土了,现在直接用这个吧。当代IE的兼容问题已经在上面的代码中解决了,那么我们之接就可以拿来使用了; 利用oninput事件,我们可以开发一款限制textarea字数的插件,像新浪微薄发表微薄的时候,就有字数的限制; 开发这个插件其实相当简单,就是对输入的字数进行一下统计,如果超出了就进行提示,直接看代码:
<!DOCTYPE html>
<html>
<head>