Event return null value when user enter decimal on

Question

Edit working on Firefox, only Chrome bug (and maybe others)

I try to get all event from a simple <input type="number" step="any" /> :

$('input[type=number]').on('input', function() {
  $('#value').text($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" step="any"/>
<br/>
<strong>Value:</strong> <span id="value"></span>

All append good when I press, or update the number. But when I try to put a decimal point . the value is null.

I use jQuery here, but the problem is the same with Vanilla JS.

Answer 1

The closest I can get is:

$('input[type=number]').on('input', function() {
  $(this).select();

  var value = window.getSelection().toString();
  window.getSelection().empty();

  $('#value').text(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" step="any"/>
<br/>
<strong>Value:</strong> <span id="value"></span>

Notice that when you type something, the field loses its focus...

Answer 2

i think it is issue with type of input field, decimal point (the dot) is not a number but it is necessary for numbers, so i guess it is the glitch in the matrix.

here is a fiddle where type is text and it is working fine.