当文本框被更改但不是由用户更改时，如何触发 Javascript 事件？

Question

我在 JSP 中有一个自定义标签 STRUTS 设置为用于处理日历的标准，我无法在此处设置任何类型的事件。

这个标签渲染这个 HTML：<A onmouseover="return true" href="javascript:ShowCalendar('data')> (..img..) </A>**

当您在链接上选择日期时，这会用所选日期更改我的文本框，此时我需要触发我的事件。

我的文本框 struts 标签是 <html:text property="data" styleClass="testo10" size="12" maxlength="10" tabindex="3"/>

我尝试了onchange 事件，但只有在用户进行更改时才有效。

无论用户是否更改文本框，我都需要触发事件（例如从 Javascript 更改或从链接更改，就像我的情况一样）。

我该怎么做？

Answer 1

这可以通过“输入”事件来实现。

<input type="text" class="txtTest" value="test" onchange="textChange();" oninput="this.onchange();"/>

这里我使用 jQuery 触发 'input' 事件并使用 setTimeout() 来动态模拟文本变化。

  function textChange(){
    alert('text change');
  }

  setTimeout(function(){
    $('.txtTest').val('new text').trigger("input");
  },2000);

JS Bin链接here

基本上，jQuery 的.trigger() 方法有助于触发您想要触发的事件。在这种情况下，我触发了文本框的“输入”事件，作为回报，它调用了它自己的 onchange() 方法。或者简单的也可以直接触发change事件。

另一种解决方案

对于 IE7 支持 jQuery 1.x + textchange plugin 有助于实现这一点。

我尝试过使用 IE7 Emulation。

<input type="text" id="txtTest" value="test"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script  src="http://zurb.com/playground/uploads/upload/upload/5/jquery.textchange.min.js"></script>

<script type="text/javascript">

$('#txtTest').bind('textchange', function (event, previousText) {
    alert(previousText);
});

setTimeout(function(){
    $('#txtTest').val('new text').trigger('textchange','some data');
},3000)

</script>

Answer 2

在 javascript 中绑定更改事件

 document.getElementById('txtbox_id').addEventListener('change', function() {

      alert("text changed"); //or do whatever u want here

    });