javascripthtmlcssinputmobile

Number pad on html input

I'm using and html input and I'm trying to simulate a verification code. So far I only have the input which can only contain numbers. For some reason the input on my phone still appears to offer letters. Is there a way to make it so mobile phones have a number keypad instead of just a regular keyboard? This is the look I want: enter image description here

It can be different as long as the user only has the numbers option. Here is the code I have so far:

<div id="my-input">
  <input type="text" numbers-only   maxlength="5"
>
</div>
<style>
#my-input {

  display: inline-block;
 
  padding-bottom: 2px;
  
  background-image: linear-gradient(to right, tomato 60%, transparent 0%);
  background-position: bottom;
  background-size: 34.5px 5px;
  
  background-repeat: repeat-x;
  overflow: hidden;
  
}

#my-input input {
  border-bottom: 0;
  border: none;
  outline: none;
  letter-spacing: 28.5px;
  overflow-x: hidden;
  width: 175px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('input[numbers-only]').forEach(function (input) {
        input.addEventListener('input', function () {
            input.value = input.value.replace(/[^.\d]+/g, '').replace(/^([^.]*\.)|\./g, '$1');
        });
    });
});
</script>
Solution

  • In HTML, input has attribute. You can use inputmode.

    <input type="text" inputmode="numeric" />

    For more details you can visit website

    Or you can use pattern

    <input type="text" pattern="\d*">

    More Details