CODEWITHSUNDEEP
javascripthtmldominputevent-listener
C. S.
C. S.

Reputation: 11

Which is the intended behaviour on update of input type=number field with value replace

During writing on a calculator with Javascript I ran into different behavior of <input type=number> fields in Chrome and Firefox.

If for whatever reason, you replace the value of the input field you're typing in with its own value inside an event listener attached to the input field, it is impossible to write numbers with decimals into the field in Firefox:

window.addEventListener("input", function(e){
    if(document.getElementById("activator").checked){
        e.target.value = e.target.value;
    }
});
<input type="number" step="0.00001">
<label>
    <input type="checkbox" id="activator">
     Activate JS value override
</label>

I wonder if this behavior in Firefox is intended or maybe even the standard? Or is there no standard defined and it's up to the browser's engine to define what happens with the value or how the value is processed?

Edit: I checked the behavior in Edge and it behaves like Chrome. Also, I only checked it with German locale (except Edge which seems to ignore the locale) in Chrome and FF, but it probably is still the same with dots as decimal separators.

Edit2: Updated the fiddle to show that the issue does not derive from the "step"-attribute.

Upvotes: 0

Views: 214

Answers (1)

connexo
connexo

Reputation: 56763

Imagine you enter 3.5.

The reason will be that the moment you enter the decimal separator . will also trigger your listener, which will attempt so set an illegal value "3.". Somehow Chrome seems to have a workaround for that issue, setting the invalid value manually doesn't work in Chrome either:

window.addEventListener("input", function(e) {
  if (document.getElementById("activator").checked) {
    e.target.value = e.target.value;
  }
})

foo.addEventListener('click', () => {
  numberinput.value = "3.";
})
<input type="number" step="0.00001" id="numberinput">
<label>
    <input type="checkbox" id="activator">
     Activate JS value override
</label>
<button type="button" id="foo">Set 3. as value</button>

Upvotes: 0

Related Questions