码迷,mamicode.com
首页 > Web开发 > 详细

JS实时获取输入框中的值

时间:2017-04-15 22:46:33      阅读:395      评论:0      收藏:0      [点我收藏+]

标签: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

 演示:

技术分享

JS实时获取输入框中的值

标签:object   gif   html   doc   失效   提示   put   indent   element   

原文地址:http://www.cnblogs.com/zhang-wang/p/6715921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!