触发对程序化更改为输入值的操作

本文介绍了触发对程序化更改为输入值的操作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我的目标是观察输入值，并在其值变为以编程方式时触发处理程序。我只需要现代浏览器。My objective is to observe an input value and trigger a handler when its value gets changed programmatically. I only need it for modern browsers.我使用 defineProperty 尝试了很多组合，这是我最新的迭代：I have tried many combinations using defineProperty and this is my latest iteration: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这似乎符合我的预期，但感觉就像我正在覆盖现有的value属性并使用 value （属性和属性）的双重状态。它还打破了似乎不喜欢修改后的属性的更改事件。This seems to do what I expect, but it feels like a hack as I am overriding the existing value property and playing with the dual status of value (attribute and property). It also breaks the change event that doesn't seem to like the modified property.我的其他尝试：一个setTimeout / setInterval循环，但这不是干净的各种观看和观察 polyfills，但它们会因输入值属性而中断a setTimeout/setInterval loop, but this is not clean eithervarious watch and observe polyfills, but they break for an input value property获得相同结果的正确方法是什么？What would be a proper way to achieve the same result?现场演示： http://jsfiddle.net/L7Emx/4/ 澄清：我的代码正在观看输入元素其他应用程序可以推送更新（例如，由于ajax调用，或者由于其他字段的更改）。我无法控制其他应用程序如何推送更新，我只是一个观察者。 To clarify: My code is watching an input element where other applications can push updates (as a result of ajax calls for example, or as a result of changes in other fields). I have no control on how the other applications push updates, I am just an observer. 为了澄清我对现代浏览器的意思，我' d对于适用于IE 11和Chrome 30的解决方案非常满意。 To clarify what I mean by "modern browser", I'd be very happy with a solution that works on IE 11 and Chrome 30. [更新] 根据接受的答案更新演示： http://jsfiddle.net/L7Emx/10/[Update] Updated demo based on the accepted answer: http://jsfiddle.net/L7Emx/10/ @ mohit-jain建议的技巧是为用户交互添加第二个输入。The trick suggested by @mohit-jain is to add a second input for user interaction.推荐答案如果解决方案的唯一问题是在价值集上破坏变更事件。你可以在集合上手动触发该事件。（但是如果用户通过浏览器对输入进行更改，则不会监视此设置 - 请参阅编辑贝娄）if the only problem with your solution is breaking of change event on value set. thn you can fire that event manually on set. (But this wont monitor set in case a user makes a change to the input via browser -- see edit bellow)<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手动触发事件编辑：手动事件触发和mutator方法的问题是当用户从浏览器更改字段值时，value属性不会更改。解决方法是使用两个字段。隐藏的一个我们可以与程序化交互。另一个是可见的，用户可以与之交互。在此考虑方法之后很简单。The problem with manual event firing and the mutator approach is that the value property won't change when user changes the field value from browser. the work around is to use two fields. one hidden with which we can have programmatic interaction. Another is visible with which user can interact. After this consideration approach is simple enough. 隐藏输入字段上的mutate value属性，以观察更改并触发onchange事件。设置值更改可见字段的值以提供用户反馈。关于可见字段值更改更新观察者隐藏的值。这篇关于触发对程序化更改为输入值的操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！