JQuery change not firing until blur

Question

I use change(handler) to listen to change events to a textarea, but I only receive an event when the textarea loses focus, but I want to receive an event as soon as the value changes.

$("#text_object").change(listener);
function listener(dom){
alert("I'm not getting here before the textarea loses focus");
}

I tried keyup: http://stackoverflow.com/questions/10269571/form-event-incompatibilities-between-browsers-how-to-address — Dude Dawg, Apr 22 '12 at 17:56

score 46 · Answer 1 · edited Feb 25 '21 at 17:30

46

according to the right answer here Javascript change event on input element fires on only losing focus

you should do something like this

$('#name').on('change textInput input', function () {
       
});

however I found that having both textInput and input events can cause the event to fire twice, you don't want that, so just do

$('#name').on('change input', function () { ...

edited Feb 25 '21 at 17:30

isherwood

58,414
16
114
157

answered Jan 14 '16 at 11:29

Slim Fadi

1,076
10
14

Works perfectly! – Peter Jun 28 '23 at 19:46

score 27 · Accepted Answer · answered Apr 22 '12 at 17:55

27

Unfortunately the browser only recognises a change when the field blurs, so you might want to try attaching a keyup listener. Not the most elegant solution, unfortunately.

Details at http://api.jquery.com/keyup/.

answered Apr 22 '12 at 17:55

Arno

1,253
14
21

11

When using keyup you can paste text with the mouse without the event triggering. – Oscar May 25 '12 at 02:33
4

Since this is top-rated and accepted: Be sure to also check out Slim Fadi's answer, which mentions the `input` event that does exactly what you want. – jlh Jul 16 '18 at 08:55

score 6 · Answer 3 · answered Apr 22 '12 at 17:59

you can do this. just make sure you give the textarea an id tag

$(document).ready(function(){
        $('.addtitle').keyup(function(event) {
            if(event.keyCode==13) { 

}
});
});

in my case here, im firing the function on the enter key (like facebooks functions).

EDIT: also if you have more then one textarea on a page, you should do this:

$(document).ready(function(){
        $('textarea[name=mynamevalue]').keyup(function(event) {
            if(event.keyCode==13) { 

}
});
});

score 1 · Answer 4 · answered Nov 03 '15 at 12:27

Here's what I do:

/* Get the current value of the input and save it 
 *  in a data attribute before any change is made to it */
$(document).on('keydown','input', function(){
   $(this).data('value',$(this).val());
});

/* Compare the values after the keyup event*/
$(document).on('keyup','input', function(){
  if($(this).data('value') != $(this).val()){
    console.log($(this).attr('name'));
  }
});

So the "keydown" event is fired before the keypress actually does any modification to the element it's called on, "keyup" is after fired. So I grab the value before and compare the new value after, then I do whatever I have to if there's a change..

I hope this helps

score 1 · Answer 5 · edited Feb 25 '21 at 17:32

You can setInterval() in your input focus event and clear this interval in blur and you related function I think this is good way to catch the input change by yourself.

Example:

var myInterval;
$("#text_object").focus(function (event) {
    myInterval = setInterval(function () {            
        listener(event);
    }, 100);
});

$("#text_object").blur(function (event) {
    clearInterval(myInterval);
});

function listener(event){
    clearInterval(myInterval);

    alert("I'm not getting here before the textarea loses focus");
}

Hope it helps.

score 1 · Answer 6 · answered Sep 02 '18 at 20:17

1

You could force a blur after each keypress so that the change checking is effectively done immediately.

$myselector.on('change', function() { /*do something*/ });
$myselector.on('keyup', function() { $(this).blur(); $(this).focus(); });

answered Sep 02 '18 at 20:17

J T

401
1
6
11

Or you could just "do something" during key up, but the problem with reacting to key events is that the contents of the box can change by right clicking on the box with the mouse by cutting or pasting the contents. Besides that, this could create other side effects if other functions fire on blur or focus. – Peter Jun 28 '23 at 19:51

Emad Ha · Answer 7 · 2017-04-12T14:29:13.137

i created this for you, it is not the most elegant solution but it works

JS:

<script>
$(document).ready(function (d) {

    /* set initial value to "" (empty string), and not null
       we're going to use this to check if the value of the current text field has been changed */
    val = '';

    setInterval(function () {
        if (val !== $('textarea[name="checktext"]').val()) {

            // Value is not the same, fire action
            alert('val is different');

            // Update the current value
            val = $('textarea[name="checktext"]').val();
        } else {
            // Val is the same as textarea value
        }

    }, 50);

});
</script>

HTML:

<textarea name="checktext"></textarea>

this script will work only for that specific textarea, you can change that or you can set the val to be an array of text inputs.

i'm just showing you the idea behind it, to use setInterval of x milliseconds to check if the value of the text input is the same as the value of the val or whatever variable name you want to use. if they don't match then it means it has been changed, if they match then it means nothing has changed.

i hope you find this useful.

However HTML5 has the solution

<script>
$(document).ready(function (d) {

    $('textarea[name="checktext"]').on('input', function () {
        alert('changed');
    });
});
</script>

JQuery change not firing until blur

7 Answers7

Linked

Related