html输入上的数字键盘

Question

我正在使用和 html 输入，我正在尝试模拟验证码。到目前为止，我只有只能包含数字的输入。出于某种原因，我手机上的输入似乎仍然提供字母。有没有办法让手机有一个数字键盘，而不仅仅是一个普通的键盘？这是我想要的样子：

只要用户只有数字选项，它就可以不同。这是我到目前为止的代码：

<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>

Answer 1

在 HTML 中，输入具有属性。你可以使用inputmode。

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

更多详情可以访问website

或者你可以使用模式

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

More Details