数字输入 - 浏览器默认值的比较

规范故意没有说明实现（浏览器）如何处理 UI。在本文中，我们专门研究 <input type="number">，您可能会惊讶地发现规范 明确说明

此规范未定义用户代理应使用哪些用户界面。

它接着解释说，不同的语言、文化和地区可能具有合理的理由以不同的方式处理数字输入。因此，浏览器在这方面是独立的，也许不出所料，对于 UI 存在许多不同的方法。让我们来看一看。

标记

<form>
  <label for="age">Enter your age</label>
  <input type="number" id="age" name="age">
</form>

这将生成一个简单的表单，其中包含一个接受数字值的输入。我在接下来的演示中添加了一些用于演示目的的 CSS，但这是我们正在查看的基本 HTML 标记。

Internet Explorer 如何处理它

Internet Explorer 在桌面浏览器中提供了最简单的默认演示。输入看起来像任何其他接受文本的表单输入。实际上，IE 根本没有为我们做出任何用户界面决策，只是在输入了一些内容后能够清除输入。这是一个方便的小功能，其他浏览器没有包含（尽管它有时出现在 type="search" 输入中）。

Firefox 如何处理它

Firefox 引入了 IE 中没有的 UI：微调器控件。这些控件包括向上和向下箭头，分别在点击时增加和减少字段的数字值。

使用 appearance 属性，可以通过一些 CSS 代码去除这些控件。

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

虽然这很好地去除了控件，但我们似乎无法控制它们的设计。

Safari 如何处理它

Firefox 和 Safari 在处理数字输入的方式上很相似。两者都包含微调器控件，并且两者都没有包含在 IE 中看到的清除 UI。

我们也可以从 Safari 中去除控件，但与 Firefox 不同，我们使用一种针对 Shadow DOM 的方法。

/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0; /* Removes leftover margin */
}

我们可以使用 Shadow DOM 样式化的另一个元素是围绕数字的不可见框。

/* Adds a box around the numeric value in Safari and Chrome */
input[type=number]::-webkit-textfield-decoration-container {
  border: 1px #ccc solid;
  background: #efefef;
}

可能有用，也可能没用。无论哪种方式，与我们迄今为止所看到的相比，Safari（和 Chrome）中具有更大的设计灵活性，这很好。

Chrome 如何处理它

Chrome 处于人群中的中间位置。乍一看，我们看到的是一个简单的表单输入。然后，当光标移到该字段上时，会显示 Firefox 和 Safari 中相同的控件。

同样，有趣的是，Firefox、Safari、Chrome 和 Opera 认为数量控件对用户体验有足够的益处，因此在 IE 没有包含它们的地方包含了它们。另一方面，Chrome 通过在悬停时显示控件而不是默认显示它们，处于中间立场。

如果我们希望 Firefox 像 Chrome 一样在悬停时显示控件？我们可以像之前一样从 Firefox 中去除控件，然后在 :hover 和 :focus 上重新应用它们。

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

/* Re-applies the controls on :hover and :focus */
input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: number-input;
}

虽然 Chrome 和 Safari 可能不像我们预期的那样相似，但它们确实共享使用 Shadow DOM 元素来样式化和操作输入的能力。实际上，Safari 部分中介绍的相同技术也适用于 Chrome。

Opera 如何处理它

Opera 处理数字输入的方式与 Chrome 完全相同。这并不令人惊讶，因为 Opera 采用了与 Chrome 相同的 Blink 渲染引擎。这意味着在 Safari 和 Chrome 中隐藏和样式化输入的相同 CSS 技巧也适用于 Opera。

由于 Opera 最近才更新到 Blink，因此查看其最后一次更新前的版本 Opera 12 如何处理数字输入非常有趣。

这里的区别在于控件如何在输入框外浮动。Firefox、Safari、Chrome 和最新的 Opera 将控件直接放置在输入框内，而 Opera 12 将它们完全放置在字段之外。更值得注意的是 Opera 如何决定在控件周围放置边框。这会创建一个看起来像是包含按钮的完整用户界面，默认情况下会扩展输入框的宽度。

从 Opera 中去除控件并非易事，只能通过将 HTML 中的输入类型更改为 text 并严格将接受的字符模式限制为数字来去除。

<form>
  <label for="age">Enter your age</label>
  <input type="text" pattern="[0-9]*" id="age" name="age">
</form>

另一个区别是数字是如何右对齐的。这有点让人想起 Excel 如何自动将数字电子表格单元格右对齐。所有其他浏览器都将文本左对齐，因此我们可以使用 CSS 强制 Opera 执行相同的操作。

html:not([dir="rtl"]) input {
  text-align: left;
}

此代码片段搜索 DOM 中任何未设置为从右到左的输入，并将文本强制到左侧。如写的那样，这将全局应用，但如果需要，可以修改为更具体。

最后一个值得注意的细节是在 :focus 上发生的全部突出显示。当字段被选中时，Opera 会应用看起来最重的样式，一直到数量控件，这些控件在点击时具有自己的活动状态。

移动版 Safari 和 Android 如何处理它

并排比较时，移动版 Safari 和 Android 浏览器非常相似。两者都像 IE 一样，在输入框上没有直接提供任何控件，但它们也与 IE 不同，因为它们没有为输入框提供额外的用户界面，以便在输入了一些内容后清除输入框。从这个意义上讲，移动浏览器提供了整个集合中最简单的默认实现。

这些浏览器识别 type="number"，并在输入框处于焦点时立即提供数字键盘。这非常酷，也很好地提醒我们，为任何表单字段添加正确的 type 是获得良好用户体验的良好做法。

结果

以下是本文中所述调查结果的摘要。

它有吗？	IE	Safari	Firefox	Chrome	Opera	iOS	Android
微调器控件	否	是	是	悬停时	悬停时	否	否
清除控件	是	否	否	否	否	否	否
左对齐	是	是	是	是	是	是	是
焦点样式	悬停时	是	是	是	是	否	否
键盘命令	是	是	是	是	是	否	否
Shadow DOM 控件	否	是	否	是	是	否	否

结论

当浏览器表现不同时，这可能会让人感到沮丧。我们很长时间以来一直在以各种方式处理这个问题。这就是发现黑客——不对，技巧——的方式。

这种比较揭示了一个有趣的事情：这些差异如何影响用户体验。如果我们创建一个数字表单输入并依赖浏览器默认设置来处理显示，那么网站的两个不同访问者很可能会拥有两种截然不同的体验。尽管这种体验对于他们来说在*不同*网站上可能是保持一致的，因为用户很可能会坚持使用同一个浏览器。

你对这些 UI 差异有什么想法吗？你是否有一个最喜欢的？你尝试过覆盖它们吗？我们在这里可以使用 JavaScript 做些什么？请在评论中分享你的想法。