JS上使用OnPropChanged和OnInput
2017-12-20 本文已影响0人
QianRay
此文为转载，可以让自己方便查看。
在 Web应用开发过程中时常会碰到需要动态监听输入框值变化的情况，比如需要用js动态验证简单的规则，大家首先想到的可能是 onkeydown、onkeypress、onkeyup、onchange 这几个事件来监听输入变化，但是这些事件不能监听右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此今天这篇文章向大家介绍一种完美的解决方案：结合 oninput 和 onpropertychange 事件来监听输入框值变化。
首先我们来看几个事件的说明和互相的区别：
- onchange事件：在内容改变（两次内容有可能相等）且失去焦点时触发；
- onpropertychange事件：是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。
- oninput事件：是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。是IE之外的大多数浏览器支持的事件，在value改变时实时触发，但是通过js改变value时不会触发。（IE9以上版本支持oninput）
- oninput事件和onpropertychange事件的区别
onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方法与一般事件相同。 - oninput与onpropertychange失效的情况：
oninput事件：
（1）当脚本中改变value时，不会触发；
（2）从浏览器的自动下拉提示中选取时，不会触发；
onpropertychange事件：
（1）当input设置为disable=true后，不会触发。
修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。
在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
完美监听输入框内容变化的示例代码如下：
用户名js实时验证实例代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>及时验证</title>
<style>
#error{
color:red;
font-weight:bold;
}
</style>
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
//alert ("The new content: " + event.target.value);
var value = event.target.value;
checkusername(value);
}
// Internet Explorer
function OnPropChanged (event) {
console.info(event)
if (event.propertyName.toLowerCase () == "value") {
var value = event.srcElement.value;
checkusername(value);
}
}
//验证用户名方法(只能是数字字母和中文，不能包括特殊字符)
function checkusername(value){
var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
if(regex.test(value) == true){
//格式正确
document.getElementById("error").innerHTML="";
}else{
//格式错误
document.getElementById("error").innerHTML="用户名格式错误，用户名由数字、字母、中文组成，不能包含特殊字符";
}
}
</script>
</head>
<body>
请输入用户名：
<input name="username" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" placeholder="数字、字母、汉字" /><label id="error"></label>
</body>
</html>
使用 jQuery 库的话，只需要同时绑定 on input 和 onpropertychange 两个事件就可以了， 示例代码如下：
jQuery实例代码JavaScript
$('input[name="username"]').bind('input propertychange', function() {
checkusername($(this).val());
});
使用 jQuery 库的话，只需要同时绑定 on input 和 onpropertychange 两个事件就可以了， 示例代码如下：
jQuery实例代码
转载自：IT视界
地址：js实时验证input内容变化|文本框变化监听|oninput & onpropertychange
