How can I fire a Javascript event when a text box is changed but not by the user?

Question

I have a custom tag STRUTS in a JSP set as standard used to handle the calendar and I can't set any type of event here.

This tag render this HTML : <A onmouseover="return true" href="javascript:ShowCalendar('data')> (..img..) </A>**

When you select date on link, this change my text box with the date selected, I need fire my event in this moment.

My textbox struts tag is this <html:text property="data" styleClass="testo10" size="12" maxlength="10" tabindex="3"/>

I tried with onchange event, but this work only if user do the changes.

I need fire event whenever the textbox is changed whether the user is or not(changes from Javascript for example or from link, like in my case).

How can I do that?

Answer 1

This can be achieved with 'input' event.

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

Here I used jQuery to trigger 'input' event and setTimeout() to just mimic text change dynamically.

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

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

JS Bin link here

Basically .trigger() method of jQuery help to trigger the event which you want to fire. In this case I'm firing 'input' event of textbox, which in return calling it's own onchange() method. Or simple you can directly trigger change event also.

Another Solution

For IE7 support jQuery 1.x + textchange plugin help to achieve this.

I tried with 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

Bind change event in javascript

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

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

    });