0

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.

AmerllicA
  • 15,720
  • 11
  • 72
  • 103
C. S.
  • 11
  • 2
  • But what are you trying to accomplish by replacing the value with itself? – Aurimas Dec 11 '18 at 10:35
  • It was a random issue I encountered when I created an array that contained values of a list of input fields, added entries that contained results of computations from these values and reapplied the array to the corresponding input fields. Didn't expect that if I reapply the original values back to the input fields this behaviour occurs in Firefox (client called me and said he can't type in commas for decimals so I investigated a bit). – C. S. Dec 11 '18 at 12:07

1 Answers1

0

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>
connexo
  • 41,035
  • 12
  • 60
  • 87
  • I am pretty sure it comes from the way the UI's state is connected to the actual value. Pretty sure there is some Regex under the hood which is also the reason why the browser is able to apply different decimal seperators to create the value depending on the browser locale. – C. S. Dec 11 '18 at 11:44