jQuery Listen For All Text Input Changes

Question

I have an input element within a form which I would like to be able to extract its value when the value changes. Take a look at this Fiddle: http://jsfiddle.net/spryno724/WaBzW/1/.

By using the change event, I am able to display the value from the text input when the input looses focus. However, the value does not update when the form is reset or when JavaScript clears the value of the text input.

Is there a specific event that I can listen for which will be dispatched when any change is made to a text input control?

I'd like to avoid work-arounds, such as listening for when the form is reset, or when the clear button is pressed. This is a simplified example of what my application does, and it will get crazy pretty fast if I try to do all of that.

Thank you for your time.

I was just working on this same problem today. The jQuery `.on` event is supposed to handle this but I couldn't make it work. `$("#ElementID").on("input change propertychange paste keyup", handler)`... — CD Smith, May 28 '12 at 03:43
I've used `.live()` before but that has been deprecated as of version 1.7 and `.on()` is now the preferred method — CD Smith, May 28 '12 at 03:45
@AlfalfaStrange see my comment to Johnny on the `.live()` event — Oliver Spryn, May 28 '12 at 03:50
possible duplicate of [JS Events: hooking on value change event on text inputs](http://stackoverflow.com/questions/1847893/js-events-hooking-on-value-change-event-on-text-inputs) — Oliver Spryn, May 30 '12 at 20:20

thecodeparadox · Answer 1 · 2012-05-28T03:59:29.727

13

$(document).ready(function() {
    $('input.clear').click(function() {
        $('input.input').val('');
        $('p.display').text('The value of the text input is: ');
    });

    $('input.input').on('keyup change', function() {
       $('p.display').text('The value of the text input is: ' + $(this).val());
    });
})

DEMO 1

Probably this solution may help you:

$(document).ready(function() {
    $('input.clear, input[type=reset]').on('click', function() {
        $('input.input').val('').change();
        $('p.display').text('The value of the text input is: ');
    });

    $('input.input').on('keyup change', function() {
        $('p.display').text('The value of the text input is: ' + $(this).val());
    });
});

DEMO 2

edited May 28 '12 at 03:59

answered May 28 '12 at 03:39

thecodeparadox

86,271
21
138
164

Thank you, but hitting reset will not update the text above the input. – Oliver Spryn May 28 '12 at 03:40
1

What about when data is set to the value of the input from another function? `.keyup` won't cover that – CD Smith May 28 '12 at 03:41
I appreciate your input, but I had also mentioned that I would "like to avoid work-arounds, such as listening for when the form is reset, or when the clear button is pressed. This is a simplified example of what my application does, and it will get crazy pretty fast if I try to do all of that." – Oliver Spryn May 28 '12 at 03:42
I see. It does work. However, resetting the form doesn't update the text above the input. – Oliver Spryn May 28 '12 at 03:47
@spryno724 Reset doesn't work but clear does.. what is reset supposed to do? – CD Smith May 28 '12 at 03:51
Reset is an HTML feature which will clear (or reset) all of the form elements within a given form to their default values. – Oliver Spryn May 28 '12 at 03:52
Using the selector `$('form').on('keyup change', 'input.input', function() {});` will be much faster when you have a lot of fields. http://jsfiddle.net/duqt8jv2/ – Ryan Schumacher Jun 01 '17 at 10:27

score 2 · Accepted Answer · edited May 23 '17 at 11:54

2

This question is an exact duplicate of another. See the answer with the highest number of up-votes as the answer to my question:

JS Events: hooking on value change event on text inputs

edited May 23 '17 at 11:54

Community

1
1

answered May 30 '12 at 20:21

Oliver Spryn

16,871
33
101
195

You're meant to (vote to) close the question as a duplicate then, not post an answer. – user247702 Jun 15 '17 at 08:43

score 1 · Answer 3 · answered Mar 10 '15 at 17:46

Override val method of jQuery

HTML

<input id='myInput' name='myInputField' value='v1'>

JS

var myInput = $('#myInput');

//this will not trigger the change event
myInput.val('v2');

//override val method
var oldVal = myInput.val;
myInput.val = function(value){
   var returnVal = oldVal.call(this,value);
   myInput.change();
   return returnVal;
}

// this will trigger the change event
// myInput.val is overridden
myInput.val('v3');

NOTE this will work only if val method is called from myInput variable

score -1 · Answer 4 · edited May 28 '12 at 04:09

-1

Try

$('#input').live('change',function() {         })

edited May 28 '12 at 04:09

thecodeparadox

86,271
21
138
164

answered May 28 '12 at 03:47

Johnny Mnemonic

187
1
2
8

`.live()` is whenever there are new elements which are dynamically added to the page and must have events attached to them: http://api.jquery.com/live/. – Oliver Spryn May 28 '12 at 03:49
6

Do NOT use `.live()` it has been deprecated as of version 1.7 – CD Smith May 28 '12 at 03:49
I know what you've said is true about it being deprecated. Strangely I had a situation where I wanted to change the background color of an input when it's value changed, and using .live('change'... worked while using .on('change'... didn't work - using jquery 1.7.3. Any idea why? – Johnny Mnemonic May 28 '12 at 03:52
Yeah I have had the same problem, I think I just suck at jQuery – CD Smith May 28 '12 at 03:56
2

@JohnnyMnemonic you need to pass in the selector context to `on`, otherwise it will just work as if you are using `.change()` `.on( events [, selector] [, data], handler(eventObject) )` – Andreas Wong May 28 '12 at 04:13
@JohnnyMnemonic Please update your answer to reflect the changes to the API. As it currently stands, it doesn't solve OPs problem and it will likely only promote bad practice. – Benjamin Gruenbaum Feb 18 '13 at 00:56

jQuery Listen For All Text Input Changes

4 Answers4

Linked