首页 > 代码库 > html5标准事件oninput实现输入检测
html5标准事件oninput实现输入检测
以往我们实现input的输入监听用到的无非是onkeyup、onkeydown、onchange，但是这些都有着一些不好的用户体验。比如onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效；而onkeydown、onkeyup在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善。
onpropertychange属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的。其他浏览器下如果想要实现这一实时监听的需求，就要用到HTML5中的标准事件oninput，不过IE9以下的浏览器是不支持oninput事件的。如果要兼容IE9以下浏览器，就需要oninput和onpropertychange一起使用。
如下实例：
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="神棍、Falost">
<title>hello world!</title>
<style type="text/css">
#box{
width:100%;
height:30px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" oninput="Monitor(this)" onpropertychange="Monitor(this)"/>
<script type="text/javascript">
function Monitor(t){
console.log(t.value)
var box = document.getElementById(‘box‘)
box.innerHTML = ‘你当前输入的是：‘+ t.value
}
</script>
</body>
</html>
实时监听input中输入内容的变化。
html5标准事件oninput实现输入检测