也许当你不想要旋转器时，用javascript将数字输入更改为文本输入;

document.getElementById('myinput').type = 'text';

并停止用户输入文本;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

然后让javascript把它改回来，以防你确实想要一个旋转器;

document.getElementById('myinput').type = 'number';

这对我来说很有效

根据苹果手机Safari的用户体验编码指南，你可以使用以下方法在iPhone浏览器中显示数字键盘:

<input type="text" pattern="[0-9]*" />

\d*的模式也可以。

简短的回答:

输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; ｝ 输入(type = "数量"]{ -moz-appearance:文本框; ｝ <input type="number" />

再答:

为了补充现有的答案……

Firefox:

在当前版本的Firefox中，(用户代理)这些元素上的-moz-appearance属性的默认值是number-input。将其更改为value文本字段有效地删除了旋转器。

input[type="number"] {
    -moz-appearance: textfield;
}

在某些情况下，你可能希望旋转器一开始是隐藏的，然后出现在悬停/聚焦上。(这是目前Chrome的默认行为)。如果是，你可以使用以下方法:

输入(type = "数量"]{ -moz-appearance:文本框; } 输入(type = "数量"]:徘徊, 输入(type = "数量"]:专注{ -moz-appearance:输入数字; } < input type = "数量" / >

铬:

在当前版本的Chrome中，(用户代理)这些元素上的-webkit-appearance属性的默认值已经是textfield。为了删除旋转器，需要在::-webkit-outer-spin-button/::-webkit-inner-spin-button伪类中将-webkit-appearance属性的值更改为none(默认为-webkit-appearance: inner-spin-button)。

输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; ｝ <input type="number" />

值得指出的是，在旧版本的Chrome中，margin: 0是用来删除边缘的。

目前，在写这篇文章时，这里是'inner-spin-button'伪类的默认用户代理样式:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

源

我找到了一个超级简单的解决方法

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

大多数浏览器都支持:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://caniuse.com/input-inputmode

如果您试图隐藏浏览器添加的控件，这应该是您滥用该输入类型的提示。

标准一致性问题

来自type=number的HTML规范:

type=number状态不适合只由数字组成但严格来说不是数字的输入。例如，它不适用于信用卡号或美国邮政编码。

(重点是我的)

可用性问题

在GOV.UK团队进行的可用性研究中，发现<input type=number>有问题。该团队维护着世界上最著名的设计系统之一，并得出结论，这种输入类型:

使用Dragon natural时不能被指定或选择 说话 在NVDA的元素列表中显示为未标记 在NVDA的对象导航中显示为旋转按钮，其中有一个编辑字段和两个按钮-这些按钮是未标记的， 但是减少/增加价值 当使用nvda+标签时，被报告为未标记的编辑字段

可选择的解决方案

相反，他们建议使用<input type="text" inputmode="numeric" pattern="[0-9]*">，这可以得到@team_steve和@youjin的组合答案。这不仅隐藏了旋转框，还提高了元素的整体可用性。

不用说，还需要进行额外的验证，以及有用的错误文本。

<标记>邮政编码 <input type="text" inputmode="numeric" pattern="[0-9]*" size="5"> < / >标签