2

I am developing a touch keyboard for a project and running into this issue which I have not been able to resolve in an acceptable way.

The main issue is when I type a decimal on the touch keyboard on a number field, the input clears because when I set the text through JavaScript: htmlinputelement.value = "161."

I get the the following error: The specified value "161." cannot be parsed, or is out of range.

I've seen a few similar questions (The specified value cannot be parsed, or is out of range when using number pipe , The specified value "." cannot be parsed, or is out of range, and a few others)

The problem is resolved if I changed the type of the input from 'number' to 'text'. But doing this then opens up other issues. Some of the input fields use the step property and we have other input validation which can't be used if the type is not 'number'.

So my questions are

  1. How can I type (using a usb keyboard) a decimal in an input field of type number without this issue? (How does the HTML input field handle value changes). I ask this since I am able to type 1. without issue but when I set it programmatically, it parses the value and fails.
  2. Is it possible to bypass the HTMLInputElement value parse when setting it?

Edit: My newest solution which seems to create the least amount of edge cases/other issues is to temporarily change the input type to 'text' to allow the decimal display, then change the type back to number after the next input. Let me know you guys thoughts on this!

Ryan w
  • 528
  • 1
  • 7
  • 21
  • 1
    See also https://stackoverflow.com/questions/57186888/how-to-programatically-set-invalid-value-in-input-type-number and https://stackoverflow.com/questions/18852244/how-to-get-the-raw-value-an-input-type-number-field – Bergi May 10 '22 at 15:40
  • 1
    *My solution right now is to automatically append 0 if a decimal is used. So `1.` -> `1.0` And the next number clicked is added to tenth decimal place (Ie: 0 is overwritten).* - show how you do that. – tevemadar May 11 '22 at 12:26
  • 1
    @tevemadar I've edited the question, that solution is out of date. Now I am changing the field type temporarily to text then back to number next keypress – Ryan w May 11 '22 at 14:11

1 Answers1

0

You can use parseFloat() (or even parseFloat().toString() if you really want).
It's a bit longer than a +"0", but you don't have to check for the presence of ..

function doTest(event){
  document.getElementById("input").value=parseFloat(event.target.innerText);
}
<input type="number" id="input"><br>
<button onclick="doTest(event)">1</button>
<button onclick="doTest(event)">2.</button>
<button onclick="doTest(event)">.3</button>
<button onclick="doTest(event)">4.5</button>
tevemadar
  • 12,389
  • 3
  • 21
  • 49
  • 1
    The problem is not getting the value (which `.valueAsNumber` would do just fine, no `parseFloat()` needed), but *setting* the value to an incomplete input – Bergi May 10 '22 at 15:33
  • @Bergi, could you tell me what you think this code does, if it's not *setting* the `input` control's `value`? When you press the `2.` button in particular, it actually runs `...value=parseFloat("2.");` and succeeds (while `...value="2.";` would throw the exception what the question describes). – tevemadar May 10 '22 at 23:14
  • 1
    Oh, sorry, I was confused and thought you'd be getting the input's `.innerText` and `parseFloat()`ing it - I didn't notice the buttons. But still, what are you are doing is just setting the input value to `2`, not to a value that will cause the *incomplete* value `2.` to *shown* in the input – Bergi May 10 '22 at 23:43