今天看到一个面试题，大致是使用js实时监听一个文本框变化事件
简单想了下，实现方式有很多种，但有些存在弊端，在这里总结下
onchange事件：内容改变并失焦是触发（脚本触发无效）
onblur：只要失焦就会触发
onfocus：事件在对象获得焦点时发生
而下面事件在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善。
onkeyup 事件会在键盘按键被松开时发生
onkeydown 事件会在用户按下一个键盘按键时发生
onkeypress 事件会在键盘按键被按下并释放一个键时发生
以上这存在着一些不好的用户体验
onpropertychange可以解决上面存在的问题（但缺点是IE专属）
oninput（属于html5,IE9以下的浏览器是不支持oninput事件）
所以我们需要综合oninput和onpropertychange
以下是使用oninput和onpropertychange实现监听文本框内容实例：
案例需求：
请用JavaScript实现，控制一个文本框只能输入正整数，如输入不符合条件则文本框全部字体标红。
要求写出完整的文本框HTML代码和JavaScript逻辑代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用oninput和onpropertychange实现监听文本框内容</title>
<!--
对于JS原生写法而言， oninput 是 HTML5 的标准事件
oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：
·修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
·修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
·修改了 select 元素的选中项，selectedIndex 属性发生变化。
在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：
-->
</head>
<body>
<input type="text" id='text'>
<!-- 使用js需要做一下兼容 -->
<script>
var text=document.getElementById("text");
if('oninput' in text){//是否支持oninput
text.addEventListener("input", function(){
this.style.color = /^[1-9]\d*$/.test(this.value) ? "#000" : "#f00";
},false);
}else{//ie7 8
text.onpropertychange = function(){
this.style.color = /^[1-9]\d*$/.test(this.value) ? "#000" : "#f00";
}
}
</script>
<!--
使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码：
-->
<!--
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$('#text').bind('input propertychange', function() {
$(this).css('color',/^[1-9]\d*$/.test($(this).val()) ? "#000" : "#f00");
});
</script>
-->
</body>
</html>
发表评论：