JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h1>监听输入框值的变化</h1>
	<!-- IE6-8 -->
	<h2>IE6-8监听输入框值的变化--onpropertychange事件，可以监听到js动态设置值</h2>
	<input type="text" id="input" />
	<div id="value" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
	
	<!-- IE9+标准浏览器  -->
	<h2>标准浏览器监听输入框值的变化--oninput事件，不能监听到js动态设置值,但是可以监听到键盘事件值的变化</h2>
	<input type="text" id="input2" />
	<div id="value2" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
	
	<h2>下面是对浏览器做兼容性处理，使用定时器</h2>
	<input type="text" id="input3" />
	<div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>

JavaScript

//  兼容IE下(IE6-8) 键盘事件 IE9不支持此事件
		$("#input").bind("propertychange",function(e){
			var value = $(e.target).val();
			$("#value").html(value);
		});
		// 兼容IE下 动态改变输入框值 是否监听到？
		$("#input").val("11");
		
		// 兼容标准浏览器 chrome firefox IE9+等 但是动态设置值并不支持
		$("#input2").bind('input',function(e){
			var value = $(e.target).val();
			$("#value2").html(value);
		});
		// 兼容标准浏览器下 动态改变输入框值 是否监听到？
		$("#input2").val("11");
		
		// 兼容各个浏览器下
		var timer = 0,
			curVal = "";
		$("#input3").bind("propertychange input",function(e){
			if(timer){
				clearInterval(timer);
				timer = 0;
			}
			curVal = $(e.target).val();
			$("#value3").html(curVal);
			interval();
		});

		function interval(){
			 timer = setInterval(function() {
				if (curVal != $("#input3").val()) {
						curVal = $("#input3").val();
						$("#value3").html($("#input3").val());
					}
				}, 100);
		}
		interval();
		// 兼容各个浏览器下 动态改变输入框值 
		$("#input3").val("11");