1.JQuery
$(
'#username'
).bind(
'input propertychange'
,
function
() {
$(
'#content'
).html($(
this
).val().length +
' characters'
);
});
(1)oninput标准HTML5事件 比onchange好用,兼容性还可以
(2)onchange事件,这个就不多说了
oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,
在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下:
<head> <script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) { alert ("The new content: " + event.target.value); } // IE function OnPropChanged (event) { if (event.propertyName.toLowerCase () == "value") { alert ("The new content: " + event.srcElement.value); } } </script> </head> <body> Please modify the contents of the text field. <input type="text" οninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" /> </body>
$(
'#username'
).bind(
'input propertychange'
,
function
() {
$(
'#content'
).html($(
this
).val().length +
' characters'
);
});