4

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Martin Wedvich
  • 2,158
  • 2
  • 21
  • 37

3 Answers3

7

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

Demo (works in all browsers)

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
0

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.

Community
  • 1
  • 1
rockerest
  • 10,412
  • 3
  • 37
  • 67
  • I tried this as well with no success; in that jsfiddle, if you try to use the Delete option in the context menu you'll see that no events fire. And while it reacts when I start to drag my selection in the input box, it doesn't fire anything when I drop it and the actual change occurs. Thanks though :) – Martin Wedvich Mar 31 '11 at 02:42
0

If you can't find a combination 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.

dgilland
  • 2,758
  • 1
  • 23
  • 17