Input change event on blur

Question

I need to trigger an input change event, but only if the value changed. And I need this done from a keyboard event. Is there a way to invoke the browser's change mechanism which will either trigger the change event to fire, or will not depending on if the value was modified?

Example:

User clicks on an input field
User does not modify value of the field
user presses a key causing the input field to blue
onchange does not get triggered.

vs

User clicks on an input field
User modifies the value of the field
user presses a key causing the input field to blue
onchange gets triggered.

Is this possible? Or I need to do the onfocus save value, onblur compare and possibly call onchange, but only if onchange was not already called because the user just navigated away by clicking vs say a keyboard trigger.

https://stackoverflow.com/a/55971801/1179379 – cancerbero May 03 '19 at 14:29 — cancerbero, May 03 '19 at 14:29

score 1 · Answer 1 · answered Oct 26 '09 at 22:32

1

What key is it? If that key isn't a standard input key, set the onchange to check the field for the change of the field.

You also can bind an onkeypress do the document, and return:false; when the key that changes the input to blue is pressed.

A little more context could help.

answered Oct 26 '09 at 22:32

CodeJoust

3,674
19
23

Basically when I press enter on an input field, I simulate a tab key press by focusing on the next input field (lets not debate this issue). However I need my change handlers to fire if the input element changes value. Just focusing on the next field does not invoke the browser's built-in change mechanism. Using jquery .focus() on the next field or .blur() on the current does not trigger change handling. I need to manually invoke .change() but I don't want to it happen when the value is not changed, and I don't want it called twice in case the user clicks on another field thus invoking it. – Dmitriy Likhten Oct 26 '09 at 22:43
1

Have you tried the onchange handler on the field itself - http://www.w3.org/TR/html401/interact/scripts.html#adef-onchange ? – Cebjyre Oct 26 '09 at 23:23
I am using jQuery 1.2.6 for the event handling. I will experiment further. – Dmitriy Likhten Oct 27 '09 at 14:19

Krzysztof Bujniewicz · Answer 2 · 2009-10-26T23:22:23.717

If I get you right, you need two variables to remember previous and current states of the input, and a listener to handle interaction:

<html>
<head>
<script language="javascript">
var startFieldValue = "Some value, possibly value of input when it is loaded";
var endFieldValue = "";
var focusFlag = 0;
function interact(keyEvent) {
    if(focusFlag == 1)
        return true;
    var key = keyEvent.keyCode? keyEvent.keyCode : keyEvent.charCode
    if(String.fromCharCode(key) == "a") {
        if(startFieldValue != endFieldValue) {
            var elem = document.getElementById('input-to-be-changed');
            elem.style.backgroundColor = "blue";
            startFieldValue = endFieldValue;
        }
    }
}
</script>
</head>
<body onkeypress="interact(event);">
<input id="input-to-be-changed" onchange="endFieldValue = document.getElementById('input-to-be-changed').value;" onfocus="focusFlag = 1;" onblur="focusFlag = 0;">
</body>

Just read the comment on previous post, you should have global idea of what's going on, though. Changes are removing checking for focus, and placing listner (onkeypress) inside every input. The function interact should take 2 values - event and id of input to focus next. Also focusing new element should change startFieldValue. Sorry to not write code itself, but it's kinda late and I really need some sleep.

My problem is: I can easily remember the previous value on focus, then check for the value again on blur, if changed invoke the change event manually. However I need to ensure that the regular change event which fires on blur due to mouse interactions does not cause 2x change event triggering. — Dmitriy Likhten, Oct 27 '09 at 14:15
I guess that after blurring input with keyboard (enter causing focusing next input), the onblur will not be fired again. Simply use onkeypress for listening, and let onblur do just nothing, leave it empty. If you need same interaction for regular mouse clicking on other input, then you just use those two variables for field values. After finishing interaction event, script changes startFieldValue to EndFieldValue. And if they are the same, ie nothing changed or function got completed for that input just now, the code will not trigger (its in line "if(startFieldValue != EndFieldValue) {" — Krzysztof Bujniewicz, Oct 27 '09 at 14:41

Input change event on blur

2 Answers2