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

 演示:


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2020 CODEPRJ.COM