Chrome - 如何禁用输入文本框上的自动增量字段答案

【问题标题】：Chrome - how to disable auto Increment field on input text boxChrome - 如何禁用输入文本框上的自动增量字段
【发布时间】：2011-10-14 15:11:04
【问题描述】：

我有一个简单的输入框：

 <input type="number" class="reference_input" value="1234567" pattern="\d*" 
       onkeypress="unicode = event.charCode ? event.charCode : event.keyCode;           
       if(unicode < 48 || unicode > 57){return false;}" />

我需要type="number" 才能让安卓手机默认打开数字键盘。

奇怪的是，当我在 Chrome 中打开此页面时，我看到一个带有顶部和底部箭头的自动增量字段。

有没有办法删除这个字段（自动增量）？

编辑：

我刚刚发现了一个类似的问题： Chrome auto formats input=number

【问题讨论】：

如果这是 Chrome 的默认设置，那么你最好的办法是使用覆盖层进行一些沉重的造型，或者将其设置回 type="text" 仅适用于 Chrome（闻起来很糟糕）。另外，您为什么不允许在您的领域使用ctrl+v？如果我的剪贴板上已经有数字，我真的很讨厌必须使用鼠标或重新输入数字。
我不能使用 type="text" 因为它不允许在 Android 上默认打开数字键盘，CSS 修复可能会很棘手，因为文本框的开头会有空格，这看起来很奇怪！ :)
EUhm：我说 only 让 Chrome 改变它（所以，使用 javascript），我的意思是一个 proper 覆盖（很多工作，我同意你）。再说一遍：我会留下按钮。我倾向于尽可能少地触摸表单元素之类的内置组件，因为用户会更好地识别他们的默认设置。
啊我明白了...这就是我所做的，我有一个检查浏览器的条件...否则插入 type="text" - 不是最好的方法 - 伤心

标签： android textbox

【解决方案1】：

使用这个 CSS：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

【讨论】：