onpropertychange & oninput兼容性

全栈程序员站长

发布于 2022-09-15 13:06:48

1.3K0

发布于 2022-09-15 13:06:48

大家好，又见面了，我是你们的朋友全栈君。

函数

onpropertychange事件:IE专有,disable=true的时候失效,onpropertychange是在触发对象改变任何属性时都会触发。onpropertychange==onchange+onblur。onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发。

oninput 事件：JS 改变 value 值时不能触发，下拉列表中选值时，也不会触发。

修改方法：

使用
$(选择器).on(事件名, 处理函数) / $(选择器).off(事件名, 处理函数)
来替代原生JS中的
elem.attachEvent(‘on’ + 事件名, 处理函数) / elem.detachEvent(‘on’ + 事件名, 	处理函数) — IE
elem.addEventListener(事件名, 处理函数) / elem.addEventListener(事件名, 处	理函数) — chrome

案例：

1、onpropertychange：适用IE，谷歌不适用。IE：监听所有属性，也适用js 改变 value

<input name="fundName" id="fundName" type="hidden" value='<DM:DocumentTag field="fundName"/>'
onpropertychange="{
	if(''==this.value){
		return;
	}
	var vtime = document.f1.sys_createtime.value;
	vtime = vtime.substring(0,10).replace(/\-/gi,'');
	document.f1.sys_title.value = vtime+'【'+this.value+'】'+'<%=strshowName%>'; 

}">

2、IE，谷歌都适用()，谷歌js 改变 value 时，却不会触发oninput

<input name="fundName1" id="fundName1" type="text" value='<DM:DocumentTag field="fundCode"/>' onpropertychange="immediately()" oninput="immediately()">

function immediately(){ 
	alert("0");
   var element = document.getElementById("fundName1"); 
   if( window.ActiveXObject) { 
		element.onpropertychange = setTitle; 
   }else{ 
		element.addEventListener("input",setTitle,false); 
   } 
 } 
function setTitle(){
	alert("1");
	var fundName = document.getElementById("fundName1");
	if(''==fundName.value){
		return;
	}
	var vtime = document.f1.sys_createtime.value;
	vtime = vtime.substring(0,10).replace(/\-/gi,'');
	document.f1.sys_title.value = vtime+'【'+fundName.value+'】'+'<%=strshowName%>'; 
}

3、IE，谷歌都适用()，谷歌js 改变 value 时，触发oninput

方法：监听对象添加定时器

<td width="124" height="23" align="center" bgcolor="#efefef">基金名称</td>
<td  bgcolor="#FFFFFF">
	<input name="fundCode" id="fundCode" type="hidden" value='<DM:DocumentTag field="fundCode"/>'>
	//监听对象
	<input name="fundName" id="fundName" type="hidden" value='<DM:DocumentTag field="fundName"/>'
	onpropertychange="{
		if(''==this.value){
			return;
		}
		var vtime = document.f1.sys_createtime.value;
		vtime = vtime.substring(0,10).replace(/\-/gi,'');
		document.f1.sys_title.value = vtime+'【'+this.value+'】'+'<%=strshowName%>'; 
	
	}">
	<input type="button" onclick="selectFundInfo()" value="&nbsp;请点击选择基金&nbsp;">
	<U><span id="showFund"><DM:DocumentTag field="fundName"/></span></U>
</td>
		
		
$(function() {
	if( window.ActiveXObject) { 
		//IE
	}else{
		//其他：谷歌...
		var intervalName;   // 定时器句柄  
		var fundNames = document.getElementById("fundName"); 
		fundNames.addEventListener("input",setTitle,false); 
		setInterval(checkChange,1000);
		
		function checkChange(){
			var intervalNames = fundNames.value;
			if(intervalNames!= intervalName){
				setTitle(fundNames);
				intervalName = fundNames.val();
			}
		}
	}
});

function setTitle(fundNames){
	if(''==fundNames.value){
		return;
	}
	var vtime = document.f1.sys_createtime.value;
	vtime = vtime.substring(0,10).replace(/\-/gi,'');
	document.f1.sys_title.value = vtime+'【'+fundNames.value+'】'+'<%=strshowName%>'; 
}

4、onchange后监听：

<select name="<%=strUserSelId%>_show" id="<%=strUserSelId%>_show" style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.options[this.selectedIndex].innerHTML;setUserSearchValue(this);setuserboxValue();">
	<option value='' selected>请选择</option>   
</select> 
<input name="problemer" id="problemer" type="hidden" class="tab4" size="30" value='<DM:DocumentTag field="problemer"/>'>


function setuserboxValue(){
	if( window.ActiveXObject) { 
		//IE
	}else{
		//其他：谷歌...
		var intervalName;   // 定时器句柄  
		var problemer = document.getElementById("problemer"); 
		problemer.addEventListener("input",setUserboxValue,false); 
		setInterval(checkChange,1000);
		
		function checkChange(){
			var intervalNames = problemer.value;
			if(intervalNames!= intervalName){
				var problemercode = document.getElementById("<%=strUserSelId%>_show"); 
				setUserboxValue(problemer.value);
				intervalName = problemer.value;
			}
		}
	}
}

function setUserboxValue(obj)
{
	document.getElementById("userbox").value = obj
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159248.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年7月1，如有侵权请联系 cloudcommunity@tencent.com 删除

https