<html>
<head></head>
<body>
<textarea id='textarea'></textarea>
</body>
</html>
<script>
// This example shows how to use the oninput, onpropertychange and textInput events to detect when the contents of a textarea element is changed. Both the oninput and onpropertychange events are buggy in Internet Explorer 9, they are not fired when characters are deleted only when inserted.
var textarea = document.getElementById ("textarea");
if (textarea.addEventListener) {
// all browsers except IE before version 9
textarea.addEventListener ("input", OnInput, false);
// Google Chrome and Safari
textarea.addEventListener ("textInput", OnTextInput, false);
// Internet Explorer from version 9
textarea.addEventListener ("textinput", OnTextInput, false);
}
if (textarea.attachEvent) {
// Internet Explorer and Opera
textarea.attachEvent ("onpropertychange", OnPropChanged);
}
// Google Chrome, Safari and Internet Explorer from version 9
function OnTextInput (event) {
alert ("The following text has been entered: " + event.data);
}
// Firefox, Google Chrome, Opera, Safari from version 5, Internet Explorer from version 9
function OnInput (event) {
alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
// 使用event.propertyName 过滤
if (event.propertyName.toLowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
}
}
</script>