Catching all changes to the contents of an input box using JavaScript/jQuery

2024/2/27 7:07:50

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?


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

Demo (works in all browsers)

Related Q&A

ChartJS place y-axis labels between ticks

I have the following graph:However, id like to shift the y axis labels to be the following:Is it possible to move the y axis labels in between the tick marks with ChartJS, like shown in the example ima…

Difference between getNamedItem() vs getAttribute()?

Both give me an attribute of an XML element. Is there any difference between them?

the HTML script tag and non-JS content - Firefox

It appears this code will request the file in Chrome and IE but not in Firefox.<script type="text/my-custom-mime-type" src="test.ashx"> </script>Is there a some spec tha…

How to detect the browser capabilities?

From all the reading that I have done, I have understood that using user-agent string is not recommended, as it can be spoofed. Devices can be hindered, etc.I have also understood that the best option…

Changing sticky nav color based on div belows color

Basically on my site I have a sticky nav that has a transparent background. Below that I have light or dark colored content divs.What Im trying to achieve is as you scroll, a javascript function is act…

Ajax upload a file from browser to FTP server

Is it possible to uplaod a file from browser to FTP server using ajax?

Making DropDown menu DropUp

I am trying to implement a drop up menu. As a starting point I am using an existing drop down menu built using HTML/CSS/jQuery based on CSS tricks Simple jQuery Dropdowns. (As I couldnt get a pure css …

Firefox doesnt load local file in iframe

I have a filefile:///C:/Users/7%20Legged%20Spider/Desktop/test.htmlWhen I set it into an iframe< iframe src="file:///C:/Users/7%20Legged%20Spider/Desktop/test.html">The iframe is blank,…

Template always compiles with old scope value in directive

Ive got a directive thats working like this:, [$compile, function ($compile) {var templateFn;return {restrict: E,scope: {target: =},link:…

Events attached to object inside canvas

I have simply canvas code which draw rect on the canvasvar x=document.getElementById("canvas"); var ctx=x.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke();is it possible to a…