input change event triggered on blur

Question

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
});

Related - https://stackoverflow.com/q/7105997/104380 – vsync Jul 12 '22 at 07:09 — vsync, Jul 12 '22 at 07:09

score 12 · Accepted Answer · answered Feb 27 '15 at 18:42

12

$(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" />

answered Feb 27 '15 at 18:42

Jenish Rabadiya

6,708
6
33
62

thanks for the code, I did not need the change part afterall +1 – user2014429 Feb 27 '15 at 18:59
@user2014429 Just for note here Changed is equal to blur in terms of behaviour :) – Jenish Rabadiya Feb 27 '15 at 19:02
1

One comment for mobile users: On Chrome mobile (maybe others), the `input` event has different behaviour, and fires on changes *and* on blur. I haven't found a way to avoid this behaviour yet. – Erik Koopmans Mar 09 '17 at 17:05

score 4 · Answer 2 · answered Feb 27 '15 at 18:36

4

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
});

answered Feb 27 '15 at 18:36

Ian Hazzard

7,661
7
34
60

score 0 · Answer 3 · edited Mar 22 '19 at 04:34

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
});

input change event triggered on blur

3 Answers3