个人中心
gpt4 book ai didi

javascript - 对输入值的编程更改触发操作

转载 作者：IT王子 更新时间：2023-10-29 03:22:21 25 4
gpt4 key购买 nike

我的目标是观察输入值并在其值以编程方式发生更改时触发处理程序。我只需要它用于现代浏览器。

我使用 defineProperty 尝试了很多组合，这是我的最新迭代:

var myInput=document.getElementById("myInput");
Object.defineProperty(myInput,"value",{
    get:function(){
        return this.getAttribute("value");
    },
    set:function(val){
        console.log("set");
        // handle value change here
        this.setAttribute("value",val);
    }
});
myInput.value="new value"; // should trigger console.log and handler

这似乎符合我的预期，但它感觉像是一个 hack，因为我正在覆盖现有的值属性并使用 value(属性和属性)的双重状态。它还会破坏似乎不喜欢修改后的属性的 change 事件。

我的其他尝试:

  • 一个 setTimeout/setInterval 循环，但这也不干净
  • 各种 watch 和 observe polyfill，但它们会因输入值属性而中断

达到相同结果的正确方法是什么？

现场演示:http://jsfiddle.net/L7Emx/4/

[编辑] 澄清一下:我的代码正在监视一个输入元素，其他应用程序可以在其中推送更新(例如，作为 ajax 调用的结果，或者作为其他字段中更改的结果)。我无法控制其他应用程序如何推送更新，我只是一个观察者。

[编辑 2] 为了澄清我所说的“现代浏览器”的意思，我很高兴有一个适用于 IE 11 和 Chrome 30 的解决方案。

[更新] 根据已接受的答案更新了演示:http://jsfiddle.net/L7Emx/10/

@mohit-jain 建议的技巧是为用户交互添加第二个输入。

最佳答案

如果您的解决方案的唯一问题是中断值集上的更改事件。然后你可以在现场手动触发该事件。 (但是如果用户通过浏览器更改输入，这将不会监控设置——请参阅下面的编辑)

<html>
  <body>
    <input type='hidden' id='myInput' />
    <input type='text' id='myInputVisible' />
    <input type='button' value='Test' onclick='return testSet();'/>
    <script>
      //hidden input which your API will be changing
      var myInput=document.getElementById("myInput");
      //visible input for the users
      var myInputVisible=document.getElementById("myInputVisible");
      //property mutation for hidden input
      Object.defineProperty(myInput,"value",{
        get:function(){
          return this.getAttribute("value");
        },
        set:function(val){
          console.log("set");

          //update value of myInputVisible on myInput set
          myInputVisible.value = val;

          // handle value change here
          this.setAttribute("value",val);

          //fire the event
          if ("createEvent" in document) {  // Modern browsers
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent("change", true, false);
            myInput.dispatchEvent(evt);
          }
          else {  // IE 8 and below
            var evt = document.createEventObject();
            myInput.fireEvent("onchange", evt);
          }
        }
      });  

      //listen for visible input changes and update hidden
      myInputVisible.onchange = function(e){
        myInput.value = myInputVisible.value;
      };

      //this is whatever custom event handler you wish to use
      //it will catch both the programmatic changes (done on myInput directly)
      //and user's changes (done on myInputVisible)
      myInput.onchange = function(e){
        console.log(myInput.value);
      };

      //test method to demonstrate programmatic changes 
      function testSet(){
        myInput.value=Math.floor((Math.random()*100000)+1);
      }
    </script>
  </body>
</html>

more on firing events manually

编辑:

手动事件触发和增变器方法的问题在于，当用户从浏览器更改字段值时，value 属性不会更改。解决方法是使用两个字段。一个隐藏的，我们可以与之进行程序化交互。另一个是可见的，用户可以与之交互。经过这种考虑，方法就足够简单了。

  1. 改变隐藏输入字段的值属性以观察变化并触发手动 onchange 事件。在设置值上更改可见字段的值以提供用户反馈。
  2. 在可见字段值更改时为观察者更新隐藏值。

关于javascript - 对输入值的编程更改触发操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19325938/

25 4 0
文章推荐： javascript - 什么是 __defineGetter__() 和 __defineSetter__() 函数？
文章推荐： dictionary - Go中的深度合并订单图
文章推荐： dictionary - 使用 Golang 将映射数据输入到结构中
文章推荐： javascript - IndexedDb iOS8 实现的主键问题
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com