3

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?

Community
  • 1
  • 1
Steverino
  • 2,099
  • 6
  • 26
  • 50

2 Answers2

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Your solution seems to work, I must be doing something wrong somewhere else, in JS maybe. I didn't think that would be causing the problem but now I suppose it must be. – Steverino Dec 30 '15 at 11:46
  • See update for possible reason, I don't think it was your code. I believe you were **too** over observant (which is a good thing). I honestly would've never noticed that inconsistancy. – zer00ne Dec 30 '15 at 11:52
  • I am at a loss, but I'm getting different behavior. No decimals are accepted under any condition, including the situation you described in your update. Any time I press a decimal, it is deleted and never reappears. I can guess this is going to be an anticlimactic solution if I find it, something silly in my JS that was interfering. – Steverino Dec 30 '15 at 11:59
  • Most likely, but you do see what I see in this demo correct? Try isolating your code block by block, and when running it, check your console and source tabs. – zer00ne Dec 30 '15 at 13:28
  • Yes, your demo worked perfectly. I also found this http://stackoverflow.com/questions/18852244/how-to-get-the-raw-value-an-input-type-number-field explaining that the implementation of `numberInput.value` is specified to output a numeric value, which will not include a trailing zero if it is an integer because why would it? You can never access the 'raw' value of a number input, that is by design and there is no workaround. The only option is to fall back to the plain text input type, as I see others doing in the event (like mine) that JS needs access to an input's 'raw' value. – Steverino Dec 30 '15 at 19:16
  • I updated the question to be much more specific to the details revealed in your comment and the experimentation you led me to. The questions sort of becomes, *is there a workaround for this?* and it seems there is not. – Steverino Dec 30 '15 at 19:35
  • Very enlightening, thanks @fts_acer , I upped your question earlier for your efforts, much appreciated, sir. :) – zer00ne Dec 30 '15 at 20:10
1

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.

Community
  • 1
  • 1
Steverino
  • 2,099
  • 6
  • 26
  • 50