Typed decimal disappears from HTML text input of type 'number' in browser

Question

Found the answer here: https://stackoverflow.com/a/18853513/983173 Also, see update below.

---

Weird behavior I've been wrestling with all day. I would very much like to be able to provide mobile users of my website with the numeric keypad when they use my site, as a shortcut for them. I've been approaching this by setting my HTML input type to 'number' as seen here:

<input id='blah' class='blah' type='number' placeholder='blah'>

This worked, but I still want the site to look decent for PC users so I had to find help removing the spinner buttons that PC browsers add when you change an HTML input type to 'number' so I added this in CSS:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

This also worked, so now I had HTML text inputs of type number, so that mobile users would automatically get the numeric keypad and PC users would not see ugly spinners. However at this point, I cannot type decimal '.' characters into my text fields in PC browsers. It works on mobile but not on PC. When I strike the '.' key, I actually visibly see the decimal appear in the text area, then disappear, but using an event listener on the input element, listening for a 'keyup' event, the value of the text input never reflects the '.' character being entered at all.

What have I missed?

Update: after copying these HTML and CSS elements into isolation (zer00ne thank you), I've traced the problem to my JavaScript, and past there to the implementation of the number input type's .value member in particular. My JavaScript is pulling the value of the number input, doing some string work with it, then putting it back. For some reason, I can't detect the trailing decimal character '.' in the screen-visible text of the input field, so when I pull the value of the number input it drops the decimal every time I type on before putting it back. Is there any other way to detect a trailing decimal in a number input or get the raw value out so that i can see it?

Answer 1

UPDATE

I see what your'e saying now, when I type the decimal, the output disappears. Fortunately, it reappears when you enter any number on the right of the decimal. So it probably interprets that period (".") as part of a string until it is surrounded by valid numbers.

---

I made a test of your code and used the input event to see if the decimal value carried over and looks like it does. Am I missing something?

Tested on Windows 8 Firefox and Chrome

var num = document.getElementById('num');
num.addEventListener('input', function(e) {
  var out1 = document.getElementById('out1');
  out1.value = num.value;
}, false);

input[type='number'] {
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<input id='num' class='num' type='number' placeholder='Number' />

<output id="out1"></output>

Answer 2

Found the answer here: https://stackoverflow.com/a/18853513/983173

In short, the number type input is specified to return a numeric value, not a string, when numberInput.value is used.

In other words, if a user types 42. into a number input, and JS calls numberInput.value on that input, the browser will by design return 42 as a number, not "42." as a string. Because if you're working with a number, the specification assumes, you would never want to know if there were a decimal on the end. There is no way you can access the 'raw' string value of a number input (in other words, no way to detect a trailing decimal), and no workaround unless you want to do key capturing or other inconvenient work to handle and track the existence of decimals, which is what I ultimately had to do.

I'm going to try to update the question to make this more clear.