Develop Reference

onblur event fires only on alternate input fields in Firefox

After each form input element, I need to do a verification using the same script.
I used onblur=myFunction("name") (where name is the name= attribute for the form field) in each form element so when the user presses <tab> the cursor advances to the next entry field.
The problem is that Firefox (Linux 93.0 - 64 bit) fires the onblur event ONLY on odd-numbered form input fields. The even numbered ones lose focus without executing the event handler.
Sometimes, but not always, I can force the event to fire by clicking on a different form input field, or rotating out and back into the form. This is very consistent.
Here are two example sequential fields from the real form, 'fname' fires the event, 'lname' does not.
There is a total of 17 named input fields. The style for these fields does not reflect the "unfocused" state after the cursor exits the field either.
<label for="fname" class="shipping">First Name</label>
<input type="text" class="shipping" name="fname" id="fname" maxlength=24 size=20 placeholder="First Name" autofocus onBlur=field_check("fname")>
<label for="lname" class="shipping">Last Name</label>
<input type="text" class="shipping" name="lname" id="lname" maxlength=48 size=30 placeholder="Last Name" required onBlur=field_check("lname")>
How to fix this issue?

Thank you to those who responded, even though nobody had an answer. I did a lot of testing and found that the problem is interference between the CSS styles and the inline onBlur, onChange, etc. When these are removed all works as expected although I can no longer determine when a field has been completed. Testing, I found that Firefox (Linux and Windows) will respond to every second event, so alternate lines do not get styled and do not report data entry. Chrome on Windows will hang after the third field is entered and the pop up cannot be dismissed without closing the browser. An old version of Internet Explorer (!) worked exactly as expected but I couldn't test either Edge or Safari since I don't have them installed here.
Overall, there seems to be some disconnect between the documentation and the implementation on mainstream browsers but I have run out of time to try and find it so I'll have to find a "plan B".

Safari number input stepUp/stepDown not functioning with empty value

I'm running into a strange issue on Safari while creating a custom React number input component. We have two buttons that, on click, call stepUp and stepDown on an input element. Here is an example:
<button onclick="document.getElementById('myInputId').stepDown()">-</button>
<input id="myInputId" type="number" />
<button onclick="document.getElementById('myInputId').stepUp()">+</button>
https://codesandbox.io/s/great-mccarthy-s2ybz
Using macOS Safari, when the input box is empty and stepUp/stepDown is called, I get the error
InvalidStateError: The object is in an invalid state.
This issue seems to affect (at least) Safari 14.0.1 to latest.
I am able to work around this by, on click, setting the value of the element to 0 if empty and then calling stepDown/stepUp, but I am wondering if there is something I am doing wrong here that might save me from having to implement this extra step.
Thanks in advance!

the best solution for handling this is exactly what you mentioned. Setting the value of the input to 0.
From Apple's document archive, the number input is expecting a match of \d* or [0-9]*. This was the latest documentation I could find, I hope this helps!
<button onclick="document.getElementById('myInputId').stepDown()">-</button>
<input id="myInputId" type="number" value="0" />
<button onclick="document.getElementById('myInputId').stepUp()">+</button>

onkeyup vs onchange for number type input

I'm having a small issue dealing with number inputs on forms, specifically when trying to call a validation js function when the user modifies them.
<input type="number" name="somenumber" onkeyup="validateForm()" />
This method only calls if the user types a number in the box and is ignored when the user uses the up/down buttons supplied by the browser. So it isn't fully effective.
<input type="number" name="somenumber" onchange="validateForm()" />
This method works great for users using the up/down buttons, but if they type a number into box, it won't execute until they move to another element or click outside the box. It's not the end of the world, but I'd like users to be able to type in the box and immediately be able to click the currently disabled submit button, rather than having to click elsewhere to enable the button.
<input type="number" name="somenumber" onchange="validateForm()" onkeyup="validateForm()" />
So to get the best possible user experience, I'm doing this. The problem is that the function often gets called twice. It works fine I guess. The users don't even notice it's running twice. Still, it seems like I'm missing something and there must be some "right" way to deal with this.
Is there? Or is this just one of those things we have to work around?

You could use the oninput event.
function validateForm() {
console.log('changed');
}
<input type="number" name="somenumber" oninput="validateForm()" />

javascript text input change event not firing

I have a text type input field and a checkbox.
If I change the text and then click outside the input box (or press enter or tab) the change event is thrown. But if I enter some text and then click directly on the checkbox using the mouse, only the checkbox change event seems to be thrown.
I have the following code:
<input type="text" name="text" class="update">
<input type="checkbox" name="check" class="update">
and this jQuery:
$('.update').change(function(){
console.log($(this));
});
Is this a known problem, and how can I make sure all change events are fired/thrown/caught in this setup?

To fire user changes, use the input event:
$('input').on('input',function(){...})
To fire code changes, use the DOMSubtreeModified event:
$('input').bind('DOMSubtreeModified',function(){...})
If you want to fire both user and code changes:
$('input').bind('input DOMSubtreeModified',function(){...})
The DOMSubtreeModified event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...

I'm not sure if I get it. But for me when I try to type in textfield and then click checkbox by mouse both events are fired. But you have to keep in mind that event 'change' for text input means that this input has to loose focus, as long as field is focused no change event ever will be triggered. This somehow might be your case. Checkboxes/radioboxes work different way tho. No need to loose focus.
Cheers.
P.S.
My test case:
http://dl.dropbox.com/u/196245/index16.html

The change event fires for both because you're listening to the update class.

The change event will not fire unless the input focus switched to other controls

Detecting "value" of input text field after a keydown event in the text field?

My site has an input box, which has a onkeydown event that merely alerts the value of the input box.
Unfortunately the value of the input does not include the changes due to the key being pressed.
For example for this input box:
<input onkeydown="alert(this.value)" type="text" value="cow" />
The default value is "cow". When you press the key s in the input, you get an alert("cow") instead of an alert("cows"). How can I make it alert("cows") without using onkeyup? I don't want to use onkeyup because it feels less responsive.
One partial solution is to detect the key pressed and then append it to the input's value, but this doesn't work in all cases such as if you have the text in the input highlighted and then you press a key.
Anyone have a complete solution to this problem?

NOTE: It's over a decade (!!) since I wrote this answer. The input event has become ubiquitous, and should be used instead of this hack.
What does keydown/keyup even mean for tablet and voice input devices?
The event handler only sees the content before the change is applied, because the mousedown and input events give you a chance to block the event before it gets to the field.
You can work around this limitation by giving the browser a chance to update the field's contents before grabbing its value - the simplest way is to use a small timeout before checking the value.
A minimal example is:
<input id="e"
onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
type="text" value="cow" />
This sets a 1ms timeout that should happen after the keypress and keydown handlers have let the control change its value. If your monitor is refreshing at 60fps then you've got 16ms of wiggle room before it lags 2 frames.
A more complete example (which doesn't rely on named access on the Window object would look like:
var e = document.getElementById('e');
var out = document.getElementById('out');
e.addEventListener('input', function(event) {
window.setTimeout(function() {
out.value = event.target.value;
}, 1);
});
<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>
When you run the above snippet, try some of the following:
Put the cursor at the start and type
Paste some content in the middle of the text box
Select a bunch of text and type to replace it

Please, try to use oninput event.
Unlike onkeydown, onkeypress events this event updates control's value property.
<input id="txt1" value="cow" oninput="alert(this.value);" />

Note that in newer browsers you'll be able to use the new HTML5 "input" event (https://developer.mozilla.org/en-US/docs/DOM/window.oninput) for this. Most non-IE browsers have supported this event for a long time (see compatibility table in the link); for IE it's version >/9 only unfortunately.

keyup/down events are handled differently in different browsers. The simple solution is to use a library like mootools, which will make them behave the same, deal with propagation and bubbling, and give you a standard "this" in the callback.

To my knowledge you can't do that with a standard input control unless you roll your own.

Jquery is the optimal way of doing this. Please reference the following below:
let fieldText = $('#id');
let fieldVal = fieldText.val();
fieldText.on('keydown', function() {
fieldVal.val();
});