(1)先说jquery, 使用 jQuery库的话,只需要同时绑定 oninput 和 onpropertychange两个事件就可以了,示例代码:
(2)对于JS原生写法而言, oninput 是HTML5的标准事件,对于检测 textarea, input:text, input:password 和input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange事件需要失去焦点才触发。oninput事件在主流浏览器的兼容情况如下:
方法二:
运行效果:
$(
'#username'
).bind(
'inputpropertychange'
,
function
(){
$(
'#content'
).html($(
this
).val().length+
'characters'
);
});
(2)对于JS原生写法而言, oninput 是HTML5的标准事件,对于检测
从上面表格可以看出,oninput事件在 IE9 以下版本不支持,需要使用 IE 特有的
- 修改了 input:checkbox 或者 input:radio元素的选择中状态, checked 属性发生变化。
- 修改了 input:text 或者 textarea元素的值,value 属性发生变化。
- 修改了 select 元素的选中项,selectedIndex属性发生变化。
在监听到 onpropertychange 事件后,可以使用 event的
集合 oninput &onpropertychange 监听输入框内容变化的示例代码如下:
方法一:
|
运行效果: