标签:object gif html doc 失效 提示 put indent element
实时获取input输入框中的值需要oninput和onpropertychange属性来实现。原因是onpropertychange属性为IE专属,而oninput属性支持大部分浏览器包括IE9及以上的版本。
oninput与onpropertychange失效的情况:
oninput事件:1. 在脚本中改变value时,不会触发;2.从浏览器的自动下拉提示中选取时,不会触发。
例如:
var testinput = document.createElement(‘input‘); if(‘oninput‘ in testinput){ object.addEventListener("input",fn,false); }else{ object.onpropertychange = fn; }
或者
var ie = !!window.ActiveXObject; if(ie){ object.onpropertychange = fn; }else{ object.addEventListener("input",fn,false); }
下面举个具体的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } input{ display: block; border:1px solid #090; width: 200px; height: 40px; line-height: 40px; font-size: 16px; margin: 50px auto; text-indent: 2em; } p{ width: 180px; padding-left: 10px; padding-right: 10px; height: 40px; background: #090; color: #fff; line-height: 40px; margin: 0 auto; } </style> </head> <body> <input type="text" id=‘btn‘ disable=‘disable‘ value="123"> <p id="title"></p> <script> var oBtn = document.getElementById(‘btn‘); var oTi = document.getElementById(‘title‘); if(‘oninput‘ in oBtn){ oBtn.addEventListener("input",getWord,false); }else{ oBtn.onpropertychange = getWord; } // var ie = !!window.ActiveXObject; // if(ie){ // oBtn.onpropertychange = getWord; // }else{ // oBtn.addEventListener("input",getWord,false); // } function getWord(){ oTi.innerHTML = oBtn.value; } </script> </body>> </html
演示:
标签:object gif html doc 失效 提示 put indent element
原文地址:http://www.cnblogs.com/zhang-wang/p/6715921.html