Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 266|回复: 0

[默认分类] JS改变input的value值不触发onchange事件解决方案

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-10 10:49:20 | 显示全部楼层 |阅读模式

    方法(一)(转载的网络资料)
    需要了解的知识

        首先,我们需要了解onchange和onpropertychange的不同:

         IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。
    onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。
    onpropertychange 是IE浏览器的专属方法

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

         经过翻阅资料得知,在其他浏览器下可以使用oninput事件来达到同样的效果,真是太好了,我们只需要把IE浏览器区分出来就可以。
    oninput的使用
    下面我们先了解一下oninput如何使用。
         如果您是将注册时间直接写在页面里面,那么如下写法就可以实现
    <input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
    但是,将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代码:



    view plaincopy to clipboardprint?

    <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代码:



    view plaincopy to clipboardprint?

    $(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不会触发。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 07:09 , Processed in 0.392047 second(s), 48 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表