html 输入上的数字键盘

Question

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

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

<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, '');
        });
    });
});
</script>

Answer 1

在HTML中，输入有属性。您可以使用 inputmode.

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

更多详情请访问website

或者你可以使用模式

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

More Details

html 输入上的数字键盘

Number pad on html input

html

javascript

css

mobile

input