html – How to open number pad on phone when typing in input type="text"?

Question:

How to open the numeric keypad on mobile when typing in input type="text" ? Or when entering input type="number" to restrict everything except the input of numbers and a comma? The problem is that if there is a dot at the end without a decimal point, input returns empty. I tried to bind regular expressions, but input type="number" doesn't react to them at all.

Am I looking for the wrong solution at all? I need that when entering decimal digits on the phone, the numeric keypad opens and everything is considered correctly – when you enter "45." "45" was used for calculation, not "" . Moreover, I noticed that input type="number" skips a dot, comma and numbers, so when a comma is used, everything is OK – that is, when you enter "45," "45" is taken into account, and when you enter "45." into the calculation "" and the result is 0.

Answer:

Since when entering input[type=number] it does not behave quite adequately when entering a point, I suggest such a crutch with input[type=hidden] . When submitting the form, take the value from it – the desired value will always be stored there.

A few explanations on the code:

  1. At keydown event, we catch a click on the dot or the fractional part (the dot on the numpad has a different code) and write the current value + dot to input[type=hidden] . We also catch the backspace + check if there is a dot in the penultimate character in input[type=number] , and if so, delete the number after the dot.

  2. The keyup event fires after the character has appeared in input[type=number] and, if its value is true , then we add it to input[type=hidden] . If it is false + the backspace key was pressed + the old value of input[type=hidden] contains one character, then we have erased all characters and input[type=hidden] must be set to an empty value.

  3. The same actions are duplicated on the input event so that you can enter the value with the arrows or the mouse wheel.

var input = document.querySelector('input[type=number]'),
  hidden = document.querySelector('input[type=hidden]'),
  output = document.querySelector('output');

input.addEventListener('keydown', function(e) {
  if (e.keyCode === 110 || e.keyCode === 190) {
    hidden.value = e.target.value + '.';
  } else if (e.keyCode === 8 && e.target.value.slice(-2, -1) === '.') {
    hidden.value = hidden.value.slice(0, -1);
  }
});

input.addEventListener('keyup', inputProcess);
input.addEventListener('input', inputProcess);

function inputProcess(e) {
  if (input.value) {
    hidden.value = input.value;
  } else if (!input.value && e.keyCode === 8 && hidden.value.length === 1) {
    hidden.value = '';
  }
  
  output.innerHTML = hidden.value;
}
<input type="number" />
<input type="hidden" />
<br>
<output></output>
Post Views: 93
Scroll to Top