when I change the value of a text input and then blur that input it triggers the input change event again. How can it register this blur as an input change? is there a way to prevent this?

$('input').on('input change',function(){
 //do something
});

when I change the value of a text input and then blur that input it triggers the input change event again. How can it register this blur as an input change? is there a way to prevent this?

$('input').on('input change',function(){
 //do something
});

• javascript
• jquery
• html

• Related - stackoverflow.com/q/7105997/104380 – vsync Commented Jul 12, 2022 at 7:09

3 Answers 3

$(function(){
  $('#onchange').on('change',function(){
    alert('changed')
  });
  
   $('#onEveryLetter').on('input',function(){
    alert('onEveryLetter')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
onchange: <input type="text" id="onchange" name="Jenish" />
<br/>
onEveryLetter: <input type="text" id="onEveryLetter" name="Jenish" />

Simply remove the change event from your code. The change event is fired onblur, but only if something has been changed since it was last blurred.

Use:

$('input').on('input',function(){
 //do something
});

Jenish's answer is correct. What's more... For those who are using a delegated listener like jQuery .on(), Here is an example that allows you to capture all the change events on the other form elements (textarea, select, etc) and ignore the change event triggered by a blur on text INPUTs.

$('div').on('input change',function(e){
      // This will keep the text INPUT from triggering for change event on blur.
      if(e.type == 'change' && e.target.nodeName == 'INPUT') {
        return false;
      }
      // Text INPUTs still pick up on the input event here
});