1

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>
Aidan Young
  • 102
  • 2
  • 6
  • By the way, the code above works perfectly except when you try it on mobile it gives you the option of using letters instead of just numbers – Aidan Young Mar 02 '21 at 20:12
  • 1
    See https://stackoverflow.com/questions/6178556/phone-numeric-keyboard-for-text-input – Giovanne Mar 02 '21 at 20:15
  • Does this answer your question? [Phone: numeric keyboard for text input](https://stackoverflow.com/questions/6178556/phone-numeric-keyboard-for-text-input) – MichielB Mar 02 '21 at 20:21

1 Answers1

2

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

DonnaTelloo
  • 190
  • 1
  • 11