Catching all changes to the contents of an input box using JavaScriptjQuery - Stack Overflow

admin管理员组

文章数量:1023782

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:

$('#input').bind('keyup cut paste', function(){...});

This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:

• When the user selects a of text and drags it do a different position in the input box
• When the user uses the Delete action in the right-click context menu

Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.

English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:

$('#input').bind('keyup cut paste', function(){...});

This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:

• When the user selects a of text and drags it do a different position in the input box
• When the user uses the Delete action in the right-click context menu

Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.

English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Dec 11, 2022 at 15:12 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 31, 2011 at 2:15 Martin WedvichMartin Wedvich 2,26633 gold badges2323 silver badges4242 bronze badges 1

• 1 I never would have known English is your second language so I feel like that's not the issue ;) – rockerest Commented Mar 31, 2011 at 2:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

In non-IE browsers, you can handle the input event.
In IE, you can handle the propertychange event.

Demo (works in all browsers)

It's possible this SO question (and related jsfiddle) might answer your question.

(On the linked jsfiddle, put text in the top box to test)

In other words, bind to mouseup and mousedown, etc.

If you can't find a bination of events that cover all cases, you may want to use setInterval(function() {... }, period). You could play around with the period to see how well this works.

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:

$('#input').bind('keyup cut paste', function(){...});

This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:

• When the user selects a of text and drags it do a different position in the input box
• When the user uses the Delete action in the right-click context menu

Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.

English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:

$('#input').bind('keyup cut paste', function(){...});

This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:

• When the user selects a of text and drags it do a different position in the input box
• When the user uses the Delete action in the right-click context menu

Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.

English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Dec 11, 2022 at 15:12 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 31, 2011 at 2:15 Martin WedvichMartin Wedvich 2,26633 gold badges2323 silver badges4242 bronze badges 1

• 1 I never would have known English is your second language so I feel like that's not the issue ;) – rockerest Commented Mar 31, 2011 at 2:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

In non-IE browsers, you can handle the input event.
In IE, you can handle the propertychange event.

Demo (works in all browsers)

It's possible this SO question (and related jsfiddle) might answer your question.

(On the linked jsfiddle, put text in the top box to test)

In other words, bind to mouseup and mousedown, etc.

If you can't find a bination of events that cover all cases, you may want to use setInterval(function() {... }, period). You could play around with the period to see how well this works.

本文标签： Catching all changes to the contents of an input box using JavaScriptjQueryStack Overflow