Question

我的表单上的文本框可能会更改，具体取决于在各种下拉列表中选择的内容。

当文本框值发生变化时，有没有办法调用javascript函数？

尝试onchange事件，但只有当用户手动更改文本框值时，这似乎才有效。

干杯，

Breandán

Answer 1

不，javascript触发的表单元素更改不会触发事件。如果他们这样做，这将导致各种递归无限循环。

简单的解决方案是在更改文本框的值时手动调用onchange函数，但是您也可以使用某种包装函数。作为一个非常基本的例子：

function updateTextField(new_text) {
  text_field.value = new_text;
  text_field.onchange();
}

Answer 2

当从JS代码设置文本框的内容时，调用传入要设置的文本的另一个函数，然后可以从任何需要的地方调用它，然后执行逻辑。

Answer 3

尝试使用setTimeout断开负责从onchange事件的执行路径更改控件值的逻辑。

<html>
  <head>
    <script type="text/javascript">
      function setValue(target) {
        alert("changed - value: " + target.value);
        setTimeout("reallySetValue('" + target.id + "');", 1);
      }
      function reallySetValue(id) {
        var control = document.getElementById(id);
        control.value += control.value;
      }
    </script>
  </head>
  <body>
    <form>
      <div>
        Enter "a" here: 
        <input type="text" id="test" onchange="setValue(this)">  
        <br/>
        <br/>
        <input type="text">  
      </div>
    </form>
  </body>
</html>

这里有说明 Changing a Textbox Value in its OnChange Event

Answer 4

您可以使用优秀的event.simulate.js来执行此操作。但是，这个脚本确实依赖于Prototype.js库。

如果您不想依赖外部库而想要这样做，请查看 fireEvent 和 createEvent 功能。简单演示如何实现这一点：

function triggerEvent(element, eventName)
{
    if (document.createEvent)
    {
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent(eventName, true, true);

        return element.dispatchEvent(evt);
    }

    if (element.fireEvent)
        return element.fireEvent('on' + eventName);
}

triggerEvent(document.getElementById('myTextbox', 'change'));

使用event.simululate.js，您可以这样做：

Event.simulate('myTextbox', 'change');

这里提出了一个类似的问题：Trigger an event with Prototype。

编辑：虽然可以使用document.getElementById('myTextbox').change()，但我不建议这样做，因为它会降低您的代码灵活性。将onChange事件附加到文本框时，手动调用change（）事件时不会触发这些事件。使用上述方法，事件将传播，就像事件是用户触发的一样。

Answer 5

在Web浏览器中，控件上的程序更改不会触发该控件上的事件。您必须指示更改文本框值的代码才能触发onchange事件。这是你在普通javascript中的方法：

var textbox = document.getElementById("boxId");
textbox.value = "Abc";
textbox.onchange();

当然，使用像jQuery这样的库可以使它更容易，更健壮：

$("#boxId").val("Abc").change();

Answer 6

假设前端是html：

您可以安装一个timout回调并以100msecs的间隔查询文本框的内容，并将其与存储在变量中的某个先前值进行比较。

关键字：window.setTimout（），window.setInterval（）

Answer 7

我建议查看YUI的自定义事件示例： YUI Custom Event Example Link

您只需将此脚本附加到事件处理

即可

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

然后您就可以使用自定义事件（HTML中的所有位置） fnSubscriberChange - 在这个Func中，你可以随心所欲。您可以将文本框更改值逻辑放在此处，并依赖于Changed Select框值 - 调用所需的func。依赖于事件监听的逻辑清晰易于修改; YUI库支持所有浏览器，因此您不必介意浏览器功能。

文本框和选择框：

 <input type='text' id='id_text_fld' value=''/>
    <select id='id_sel_one'>
     <option value="test1">Test1
     <option value="test2">Test2
    </select>
    <select id='id_sel_two'>
     <option value="test3">Test3
     <option value="test4">Test4
    </select>

事件脚本：

<script>
    (function() {

        //create a new custom event, to be fired
        var onChangeValue = new YAHOO.util.CustomEvent("onChangeValue");
        // Attach change event listener for Select boxes by their IDs
      YAHOO.util.Event.on( ['id_sel_one', 'id_sel_two'], 'change', fnCallback, this);  
      // Function to call when Change event on Select occures
        fnCallback = function(e) { 
            alert("This elem:" + this.id+ " changed value to:" + this.value);
            // Fire our Custom event 
        onChangeValue.fire({dom_el: this}); // passing select box element [this] to function 
      }

      // Listen for Custom event and call our Func 
      onChangeValue.subscribe(fnSubscriberChange); // Lets listen for ChangeValue event and call our Func 
        fnSubscriberChange = function(type, args) {
             alert("Event type:" + type + " dom el id:" + args[0].dom_el.id );
             var dom_el = args[0].dom_el; // Select Box that produces Change
        };
    })();
    </script>

在没有用户交互的情况下触发的Javascript事件？

7 个答案: