文本框改變時觸發 - gaocong－IT工程師數位筆記本

文章出處

<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>