关于 onchange,onpropertychange,oninput事件

关于 onchange,onpropertychange,oninput事件转载于:https://www.cnblogs.com/aigeileshei/p/5682303.htmlhttps://www.cnblogs.com/aigeileshei/p/5682303.htmlJS改变input的value值不触发onchange事件解决方案(转)方法(一)(转载的网络资料)需要了解的知识首先,我们需要了解onchange和onpropertycha…

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

转载于:https://www.cnblogs.com/aigeileshei/p/5682303.html
https://www.cnblogs.com/aigeileshei/p/5682303.html

JS改变input的value值不触发onchange事件解决方案 (转)

方法(一)(转载的网络资料)

需要了解的知识
首先,我们需要了解onchange和onpropertychange的不同:
IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。

onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。

onpropertychange 是IE浏览器的专属方法

了解这一点后我们发现onpropertychange的效果就是我们想要的,可是很遗憾,它只在IE下有效果。我们能不能找到另外一个时间来代替onpropertychange呢?

经过翻阅资料得知,在其他浏览器下可以使用oninput事件来达到同样的效果,真是太好了,我们只需要把IE浏览器区分出来就可以。
oninput的使用
下面我们先了解一下oninput如何使用。
如果您是将注册时间直接写在页面里面,那么如下写法就可以实现

但是,将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同,必须使用addEventListener来注册。
ttachEvent和addEventListener 的不同

  • 说到这里我们再来了解一下 attachEvent和addEventListener 的使用方法:

attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
document.getElementById(“btn”).onclick = method1;
document.getElementById(“btn”).onclick = method2;
document.getElementById(“btn”).onclick = method3;

如果这样写,那么将会只有medhot3被执行

var btn1Obj = document.getElementById(“btn1”);
btn1Obj.attachEvent(“onclick”,method1);
btn1Obj.attachEvent(“onclick”,method2);
btn1Obj.attachEvent(“onclick”,method3);

执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener

var btn1Obj = document.getElementById(“btn1”);
btn1Obj.addEventListener(“click”,method1,false);
btn1Obj.addEventListener(“click”,method2,false);
btn1Obj.addEventListener(“click”,method3,false);
执行顺序为method1->method2->method3

了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。

判断IE浏览器

如何将IE区分出来呢?
这似乎是一个老生常谈的问题,网络中有很多找那个方法,归类为两类:
其一,是判断浏览器的功能属性。
其二,就是判断传统的 user-agent 字符串,这可能是最古老也是最流行的检测方式。
在这里就不做深入了解了,我们这里用一种比较简单的方法来判断

if(“\v”==“v”) {

alert(“IE”);
}else{

alert(“NO”);
}

到目前为止我们遇到的问题就已经解决了,开始写代码来测试我们的思路是否能够实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<meta name="auther" content="fq" />
	<title>监听输入框值的即时变化 onpropertychange  oninput</title>
	<script type="text/javascript"> function immediately(){ 
     var element = document.getElementById("mytext"); if("\v"=="v") { 
     element.onpropertychange = webChange; }else{ 
     element.addEventListener("input",webChange,false); } } function webChange(){ 
     if(element.value){ 
    document.getElementById("test").innerHTML = element.value}; } </script>
</head>
<body>

// 直接写在页面中的示例:
	<input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />
	<div>您输入的值为:<span id="webtest">还未输入</span></div>
	<br /><br /><br /><br /><br />
	写在JS中的示例:
	<input type="text" name="textfield" id="mytext" />
	<div>您输入的值为:<span id="test">还未输入</span></div>
<script type="text/javascript"> immediately(); </script>
</body>
</html>

更改为使用js往input里面加载值!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<meta name="auther" content="fq" />
	<title>监听输入框值的即时变化 onpropertychange  oninput</title>
<script type="text/javascript"> function immediately(){ 
     var element = document.getElementById("mytext"); if("\v"=="v") { 
     element.onpropertychange = webChange; }else{ 
     element.addEventListener("input",webChange,false); } } function webChange(){ 
     if(element.value){ 
    document.getElementById("test").innerHTML = element.value}; } function addValue(){ 
     document.getElementById("mytext").value='dfdsafdsfsfsdfsdfdsf'; document.getElementById("mytext2").value='dfdsafdsfsfsdfsdfdsf'; } </script>
</head>
<body>
	<input type="button" id="txts" value="点击加载值!" onclick="addValue();"/>
	//直接写在页面中的示例:
	<input type="text" id="mytext2" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />
	<div>您输入的值为:<span id="webtest">还未输入</span></div>
	<br /><br /><br /><br /><br />
	//写在JS中的示例:
	<input type="text" name="textfield" id="mytext" />
	<div>您输入的值为:<span id="test">还未输入</span></div>
<script type="text/javascript"> immediately(); </script>
</body>
</html>

实践证明在IE中可以,在火狐中不可以!猜测可能是在火狐中不适用!于是使用了方法(二),方法(二)是比较笨重的一种手法,花了很多事情去测试和 更改方法二,但并没有达到我要的效果!况且有计时器的存在,会影响到一定的效率问题!方法(二)并不是说不是好做法,只是适用于什么地方,有可能以后又需 要的地方还得使用呢!

那这样的话,方法二我们都不用看了!

在不断的尝试中发现,方法一并不是不可用,只是,从网上看到的代码存在一点问题。只能说,为什么这些文章上传地有点草率了,给后来人带了不少麻烦。就这么一点点的错误就可以让我们不断尝试呀!为了不让更多的人尝试,希望这篇文章能给纠正一下!

其实,主要修改为:给方法加上()

document.getElementById(“mytext”).addEventListener(“input”,changeValue,false);

改为:document.getElementById(“mytext”).addEventListener(“input”,changeValue(),false);

以下为实验代码:(IE可行,火狐可行)

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testInput.jsp' starting page</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
<script type="text/javascript"> function addValue(){ 
     document.getElementById("mytext").value='dfdsafdsfsfsdfsdfdsf'; init(); } function addValue2(){ 
     document.getElementById("mytext").value='哈哈哈哈'; init(); } function changeValue(){ 
     document.getElementById("webtest").value=document.getElementById("mytext").value; } function init(){ 
     if("\v"=="v"){ 
    //IE浏览器 document.getElementById("mytext").onpropertychange=changeValue; }else{ 
     // 其他浏览器 document.getElementById("mytext").addEventListener("input",changeValue(),false); } } </script>
  </head>
  <body>
    <input type="button" id="txts" value="点击加载值!" onclick="addValue();"/>
    <input type="button" id="txts2" value="第二次改加载值!" onclick="addValue2();"/>
    <input type="text" name="textfield" id="mytext"/>
    <div>您输入的值为:<input id="webtest"></input></div>
  </body>
</html>

(方法二)(转载的网络资料)

实时监听js改变value,跨浏览器支持

有两个文本框,其中一个只读,另一个可以输入。要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容。
这个功能看是简单,但其实并没有想象的那么简单。(注意,可输入框的处理没什么可讨论的,关键是只读框的处理)

一开始,我们一般会想到在只读文本框上运用onchange事件。一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过js改变的。于是,需要寻找另外的方法。

这时,在网上找到了onpropertychange事件。该事件在文本框属性改变时触发,不管是通过什么方式改变的。注意,是属性改变,而不仅仅是value改变。一试,果然好使。然而,这个事件是IE专有的。WEB开发,必须得考虑浏览器的兼容问题。于是继续摸索……

在网上有看到了另外一个事件:oninput。网上到处都是:fireFox中的该事件与IE中onpropertychange的事件等同。然而,我一 试,发现根本不等同。oninput事件在fireFox中似乎没有起作用。经过一段时间测试,终于明白,原来oninput并非与 onpropertychange等同(网上到处到处乱转贴,也不认真测试一下)。oninput只在用户输入值改变时触发(即value改变),并非所 有属性改变时触发,而且,通过js改变value时,oninput不会触发。这下郁闷了。好不容易看到点希望,又再次陷入了失望,还好没有绝望……哎, 浏览器兼容问题真是麻烦。

左思右想,总有又有了眉目。对于fireFox等浏览器,可以通过定时器检查只读文本框的内容是否改变。测试后,终于大功告成。下面把代码贴出来与大家分享。

在IE中的效果:

FireFox中的效果图:

另外,我还在google Chrome测试也成功了(跟fireFox一样的)。

HTML代码:

<table> 
            <tr> 
                <td>此处值通过js设置:</td> 
                <td><input id="jsUserName" type="text" name="jsUserName" readonly/></td>
            </tr> 
            <tr> 
                <td>此处输入值:</td> 
                <td><input id="userName" type="text" name="userName"/></td> 
            </tr> 
        </table> 
<table>
   <tr>
    <td>此处值通过js设置:</td>
    <td><input id="jsUserName" type="text" name="jsUserName" readonly/></td>
   </tr>
   <tr>
    <td>此处输入值:</td>
    <td><input id="userName" type="text" name="userName"/></td>
   </tr>
  </table>
 


JavaScript代码:

$(function()  
        { 
     
            var jsUserName = "";  
            if($.browser.msie)  // IE浏览器 
            { 
     
                $("#userName").get(0).onpropertychange = setJsUserName;  
                $("#jsUserName").get(0).onpropertychange = handle;  
            }  
            else    // 其他浏览器 
            { 
     
                var intervalName;   // 定时器句柄 
                $("#userName").get(0).addEventListener("input",setJsUserName,false);  
                  
                // 获得焦点时,启动定时器 
                $("#userName").focus(function(){ 
     
                    intervalName = setInterval(handle,1000);  
                });  
                // 失去焦点时,清除定时器 
                $("#userName").blur(function()  
                { 
     
                    clearInterval(intervalName);  
                });  
            }  
              
            // 设置jsUserName input的值 
            function setJsUserName()  
            { 
     
                $("#jsUserName").val($(this).val());  
            }  
              
            // jsUserName input的值改变时执行的函数 
            function handle()  
            { 
        
                // IE浏览器此处判断没什么意义,但为了统一,且提取公共代码而这样处理。 
                if($("#jsUserName").val() != jsUserName)  
                { 
     
                    $("#toolTip").remove();  
                    $("#jsUserName").parent().append("<span id='toolTip'>看到这里的信息表明,通过js改变input的值也能响应相应事件:< span style="color:red;" mce_style="color:red;">" + $("#jsUserName").val() + "</span></span>");  
                    jsUserName = $("#jsUserName").val();  
                }  
            }  
        }); 
$(function()
  { 
   
   var jsUserName = "";
   if($.browser.msie) // IE浏览器
   { 
   
    $("#userName").get(0).onpropertychange = setJsUserName;
    $("#jsUserName").get(0).onpropertychange = handle;
   }
   else // 其他浏览器
   { 
   
    var intervalName; // 定时器句柄
    $("#userName").get(0).addEventListener("input",setJsUserName,false);
    
    // 获得焦点时,启动定时器
    $("#userName").focus(function(){ 
   
     intervalName = setInterval(handle,1000);
    });
    // 失去焦点时,清除定时器
    $("#userName").blur(function()
    { 
   
     clearInterval(intervalName);
    });
   }
   
   // 设置jsUserName input的值
   function setJsUserName()
   { 
   
    $("#jsUserName").val($(this).val());
   }
   
   // jsUserName input的值改变时执行的函数
   function handle()
   { 
    
    // IE浏览器此处判断没什么意义,但为了统一,且提取公共代码而这样处理。
    if($("#jsUserName").val() != jsUserName)
    { 
   
     $("#toolTip").remove();
     $("#jsUserName").parent().append("<span id='toolTip'>看到这里的信息表明,通过js改变input的值也能响应相应事件:< span style="color:red;" mce_style="color:red;">" + $("#jsUserName").val() + "</span></span>");
     jsUserName = $("#jsUserName").val();
    }
   }
  });

说明:为了方便,js代码使用了jQuery。不使用是一样的。
另外,考虑性能问题,可以考虑何时启动定时器和清除定时器以及定时器延时时间。

总结:

1、onchange事件与onpropertychange事件的区别:
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。

2、oninput事件与onpropertychange事件的区别:
oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value 时,却不会触发;onpropertychange事件是任何属性改变都会触发的,而oninput却只在value改变时触发,oninput要通过 addEventListener()来注册,onpropertychange注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容 与行为分离)

3、oninput与onpropertychange失效的情况:
(1)oninput事件:a). 当脚本中改变value时,不会触发;b). 从浏览器的自动下拉提示中选取时,不会触发。
(2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。

取巧方式:

jQuery.fn.val方法来赋值本来就不触发change事件,但是可以手动触发。
如:$(’#inp’).val(3353).change();

转载于:https://www.cnblogs.com/aigeileshei/p/5682303.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159273.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 如何在html添加css样式表,网页中添加CSS样式表的四种方式

    如何在html添加css样式表,网页中添加CSS样式表的四种方式本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍。CSS样式表文件的优势表现在两个方面:***,简化了网页的格式代码,外部的CSS样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格…

  • 英语商务邮件常用句子_商务英语email写作

    英语商务邮件常用句子_商务英语email写作1.Iamwritingtoconfirm/enquire/informyou…我发邮件是想找你确认/询问/想通知你有关…2.IamwritingtofollowuponourearlierdecisiononthemarketingcampaigninQ2.我写邮件来是为了跟进我们之前对第二季度营销活动的决定。3

    2022年10月20日
  • LNMP环境的搭建

    LNMP环境的搭建

  • vscode新建html文件快捷键_vscode怎么运行代码HTML

    vscode新建html文件快捷键_vscode怎么运行代码HTMLctrl+N新建文件ctrl+S保存为html文件shift+!然后回车快速新建html成功

  • linux对外开放端口_如何通过命令开启端口

    linux对外开放端口_如何通过命令开启端口本文目录一、引言二、管理防火墙的命令2.1、开启防火墙2.1.1首先查看防火墙状态2.1.2开启防火墙2.1.3设置开机自启2.1.4重启防火墙2.1.5查看防火墙设置开机自启是否成功2.2、开启特定端口2.2.1添加端口2.2.2重新载入2.2.3查看2.2.4删除2.2.5关闭防火墙2.2.6查看开启的所有端口2.2.7查看服务的监听一、引言在Centos7.x中防火墙由firewalld来管理,以前为了方便,把防火墙都关闭了,因为现在项目

  • 初窥Linux 之 我最常用的20条命令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了。每个人玩Linux的目的都不同,所以他们常用的命令也就差异非常大,而我主要是用Linux进行C/C++和shell程序编写的,所以常用到的命令可以就会跟一个管理Linux系统的人有所不同。因为不想在使用是总是东查西找,所以在此总

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号