JS实时获取输入框中的值
Posted 东张西旺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实时获取输入框中的值相关的知识，希望对你有一定的参考价值。
实时获取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
演示：
以上是关于JS实时获取输入框中的值的主要内容，如果未能解决你的问题，请参考以下文章