超越基础：使用 `` 像专业人士一样处理数字输入

什么是

根据 MDN 文档定义： number 类型的元素用于让用户输入数字。它们包括内置验证以拒绝非数字条目。

所以基本上，它是一个增强我们蹩脚网站和网络应用程序用户体验的功能。虽然它是一个简化数字输入的好功能，但它有一些行为一开始可能并不明显，但作为 Web 开发人员我们应该意识到。

这些行为与：

1. 虚拟键盘
2. 科学记数法

虚拟键盘

虚拟键盘是出现在屏幕上的键盘，通常出现在手机、平板电脑/ipad 等触摸输入设备和一些辅助技术中。

<input id="numeric-input" type="number">

仅使用 type="number" 乍一看似乎没问题，但在使用虚拟键盘时就会出现问题。它可能会打开全键键盘而不是数字键盘，这会损害用户体验和输入准确性。

`" />

解法输入方式

虽然在较新的操作系统和浏览器版本上可能不会出现虚拟键盘问题，但使用 inputmode 属性仍然是一个好主意，因为它暗示用户在编辑元素或其元素时可能输入的数据类型内容。
这允许浏览器为所有版本和设备显示适当的虚拟键盘，从而改善应用程序的整体用户体验 (UX)。

inputmode 可以有许多值，但对于我们使用数字输入的用例，我们应该使用以下两个值之一：
1.数字

<input id="numeric-input" type="number" inputmode="numeric">

输入类型数字接受任何有理值。如果您不接受小数值而只接受整数，则在这种情况下应首选使用数值。

2.十进制

<input id="numeric-input" type="number" inputmode="decimal">

如果您接受小数，请使用十进制值，因为它将显示一个虚拟键盘，其中包含用户区域设置的数字和小数分隔符。

总是更喜欢在输入中使用小数值，除非您不接受小数值。

`" />

科学记数法

我们中的许多人可能已经忘记或不知道 e 或 E 是科学计数法中的有效数值。

`" />

是的，e或E在科学计数法中表示“十的指数”，用于表示非常大或非常小的值。例如

1e5 = 100000 
     or 
1e-5 = 0.00001

HTML 输入类型数字的设计考虑到了灵活性，并且它支持这种科学记数法，允许输入指数（例如 1e5）。虽然这本身不是问题，并且在某些情况下很有用，但当输入仅包含基本数字时，它可能会出现问题。

有两种方法可以限制输入只能输入数字并且不允许输入科学计数法。

1. 使用正则表达式？图案。
2. 使用 Javascript（我的首选方法）。

使用 Javascript 防止默认行为

在大多数情况下，我不希望用户输入“e”或“E”符号，因为不需要它们，并且允许它们可能会导致一些意外的问题。

实现此目的的方法有很多，但我最喜欢的方法是防止“e”或“E”键被注册。我们可以使用 keydown 事件和 PreventDefault 来实现这一点。

 element.addEventListener("keydown", (e) => {
    if (["e", "E"].includes(e.key)) {
      // you can also add "+" and "-" if you want to prevent them from being registered.
      e.preventDefault();
    }
  });

我特别喜欢这个方法，因为三个原因：

• 它向稍后阅读我们代码的任何人提供了一个明确的信息，即我们不想注册 e 或 E 键。
• 它还可以提供更好的用户体验，因为我们没有注册密钥本身，而是更改值。
• keydown 事件的类型是 KeyboardEvent，它使我们能够直接访问关键值，从而提高解决方案的整体 DX。

并非所有数字输入都需要是输入类型数字

有时，如果我们看到接受数字输入的输入要求，我们可以本能地找到输入类型数字，但有时输入类型数字并不是此类场景的正确解决方案。

此类场景的一些示例是：

• 信用卡/借记卡：当我们有信用卡/借记卡的输入字段时，最好不要使用输入类型数字，而是使用输入类型文本，输入模式为数字和使用您首选的方法进行验证，因为信用卡可以有前导零值，而某些浏览器可能不允许这样做，我们也可能想添加一些卡特定的验证或允许一组四个数字之间的空格（因为它印在卡上） ）。

• 邮政编码：虽然大多数国家都有数字邮政编码，但加拿大等一些国家可能有字母数字代码，重要的是根据您的需要使用解决方案，它可以是输入类型数字或输入类型文本。

• 手机号码：您应该始终使用 input="tel" 的输入类型以及适合您的用例的正则表达式模式。

结论

由于现代 HTML 提供了一些非常好的实用程序，有些事情可能感觉实现起来非常简单，例如输入类型数字，但是作为开发人员，我们应该始终关注这些实用程序以及如何利用它们来创建更好的用户体验。

如果您喜欢这篇文章，请发表评论，如果您不喜欢某些内容，可以在评论中留下您的反馈。

我喜欢与人们联系并谈论科技及其相关事件。您可以在 Twitter/X 和 LinkedIn 上与我联系。

您也可以在 Dev.to 上关注我，以便在我发布新文章时收到通知。

以上是超越基础：使用 `` 像专业人士一样处理数字输入的详细内容。更多信息请关注PHP中文网其他相关文章！