html5动态输入效果,动态监听输入框值的变化

我们有时会需要动态监听输入框值的变化，当使用onkeydown、onkeypress、onkeyup作为监听事件时，会发现一些复制粘贴等操作用不了。专业的解决方案：HTML5标准事件oninput、onchange和IE专属的事件properchange。

1oninput和propertychange事件

input是标准的浏览器事件，一般应用于input元素，当输入框的值发生改变时触发该事件，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化，重点是oninput是在值改变时立即触发。

propertychange：功能同oninput，用以替代oninput在IE9以下的不兼容性。

2onchange事件

onchange是在值改变后失去焦点才触发，并且可以用在非输入框中，如：select等。

3最佳方案

input和propertychange一起使用

$(".order_discount_item input[type='number']").on("input propertychange", function () {

var modify = false;

var value = $(this).val().toString();

var inputName = $(this).attr("name");

// 全部虚拟货币只能输入挣整数

if ((value.length > 0 && /^[1-9]\d{0,6}$/.test(value) == false)) {

value = value.substr(0, value.length - 1);

$(this).val(value);

return;

} else if (value.length > 0 && /^[0-9]{0,6}\.?[0-9]{0,2}$/.test(value) == false) {

value = value.substr(0, value.length - 1);

$(this).val(value);

return;

}