jquery - Cross-browser JavaScript input live changepaste detection - Stack Overflow

admin管理员组

文章数量:1026989

Is there a cross-browser way to detect live changes to an input field?

By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.

Using binations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different binations will make it work somewhat in other browsers.

The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.

The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and pare the value against a stored value. But this seems like overkill when the event-based solution es so close.

Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?

Is there a cross-browser way to detect live changes to an input field?

By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.

Using binations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different binations will make it work somewhat in other browsers.

The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.

The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and pare the value against a stored value. But this seems like overkill when the event-based solution es so close.

Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?

• javascript
• jquery
• input
• jquery-events

Share Improve this question Follow edited Aug 23, 2020 at 17:57 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 20, 2010 at 15:15 javascripteroojavascripteroo 9111 silver badge22 bronze badges 3

• jQuery should be cross browser patible in that regard, at least for those browsers and their version found at docs.jquery./Browser_Compatibility; If this isn't the case I would suggest you file a bug. – azatoth Commented Jun 20, 2010 at 15:36
• @aza I'm not exactly sure which jQuery event helpers to use to achieve what I want (an immediate update on any change to the value of the input field), since .change() is fired when the input field loses focus. Do you know? – javascripteroo Commented Jun 20, 2010 at 21:23
• A simple solution is described here: whattheheadsaid./2010/09/… – biziclop Commented Jul 29, 2011 at 8:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

To plete your change and key handlers, you can add handlers for cut/copy/paste. They work in Firefox >=3, IE, Safari and Chrome (but not in Opera/Konqueror).

Would that cover everything for your use case?

Depending on the Browsers you need to support you might use HTML5's oninput.
It fires immediately when the monitored input changes. In jQuery you would just do:

$('#my-input').bind('input', function(e) {
    console.log("#my-input's value changed");
});

Is there a cross-browser way to detect live changes to an input field?

By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.

Using binations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different binations will make it work somewhat in other browsers.

The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.

The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and pare the value against a stored value. But this seems like overkill when the event-based solution es so close.

Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?

Is there a cross-browser way to detect live changes to an input field?

By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.

Using binations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different binations will make it work somewhat in other browsers.

The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.

The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and pare the value against a stored value. But this seems like overkill when the event-based solution es so close.

Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?

• javascript
• jquery
• input
• jquery-events

Share Improve this question Follow edited Aug 23, 2020 at 17:57 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 20, 2010 at 15:15 javascripteroojavascripteroo 9111 silver badge22 bronze badges 3

• jQuery should be cross browser patible in that regard, at least for those browsers and their version found at docs.jquery./Browser_Compatibility; If this isn't the case I would suggest you file a bug. – azatoth Commented Jun 20, 2010 at 15:36
• @aza I'm not exactly sure which jQuery event helpers to use to achieve what I want (an immediate update on any change to the value of the input field), since .change() is fired when the input field loses focus. Do you know? – javascripteroo Commented Jun 20, 2010 at 21:23
• A simple solution is described here: whattheheadsaid./2010/09/… – biziclop Commented Jul 29, 2011 at 8:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

To plete your change and key handlers, you can add handlers for cut/copy/paste. They work in Firefox >=3, IE, Safari and Chrome (but not in Opera/Konqueror).

Would that cover everything for your use case?

Depending on the Browsers you need to support you might use HTML5's oninput.
It fires immediately when the monitored input changes. In jQuery you would just do:

$('#my-input').bind('input', function(e) {
    console.log("#my-input's value changed");
});

本文标签： jqueryCrossbrowser JavaScript input live changepaste detectionStack Overflow