Detecting Change Before Blur

I have an input field where users can input a number, and JavaScript calculates a result and displays it on the page. In order to have the best user experience, I want JavaScript to perform the calculation whenever the number in the field is changed. However, the “change” event works only when the input loses focus.

I have added “keyup” as a second event for the calculation to be performed, which covers many cases of user input. However, this is still not perfect, because the user could paste a value into the box or change the value in some other way (i.e. clicking the up and down arrows on compatible browsers).

Is there an event that fires whenever the value in the input changes, regardless of the focus of the input? Is there some other way to work around this problem? It seems like this would be the kind of thing that would have a thousand hits on Google, but I can’t seem to find anything.

My code:

function onLoadFunc(){
	if(document.addEventListener){
		document.getElementById("wm_buy_amt_input").addEventListener("keyup", wbCalculateOther, false);
		document.getElementById("wm_buy_amt_input").addEventListener("change", wbCalculateOther, false);
	}else if(document.attachEvent){
		document.getElementById("wm_buy_amt_input").attachEvent("onkeyup", wbCalculateOther);
		document.getElementById("wm_buy_amt_input").attachEvent("onchange", wbCalculateOther);
	}
}
<input type="number" value="0" min="0" id="wm_buy_amt_input" />

People still use that? :shifty: I haven’t touched that menu in years!

Anyway, I don’t think there is an event for that. Maybe you could do a setInterval when the field gets focus, and check every time if the value changed, and do a clearInterval onblur of the field?
Sounds a bit overkill, but I don’t really know another way I’m afraid.

Hmm. I added a mouseup event to the input element, and although it doesn’t cover Edit Menu Pasting, it does cover the up/down buttons on HTML5 browsers. However, I had to have the function fire on a 1 ms timeout because apparently the event fires before the field is changed. (I’m using Safari 5 [WebKit 533.16] on Mac.)

In order to cover Edit Menu Pasting, to what element would I have to add the mouseup event?

If you combine keyup for typing with mouseup for pasting, that should cover it I think.
Or am I missing something?