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. without issue but when I set it programmatically, it parses the value and fails.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!
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>