为什么说数字输入框是最最难用

译文原文：https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/
译文作者：Jared Toporek

为什么不建议用

<input type="number" id="id_here" value="sad" />

const numberInput = document.getElementById("id_here");
console.log(numberInput.value); // 打印出 ""

https://codesandbox.io/s/funny-sky-tfjok3?file=/index.html

• 数字输入将允许用户输入无效的数字值，但实际上无法检索无效的值

  所以，当我们用户输入后，只是提示用户输入无效，而不能精准告诉用户该怎么做，我们大多数人都会感到烦人，用户体验差多了，使用JavaScript进行此类验证绝对是必不可少的。

• 有效数字不仅包括数字（即，像字母e这样的科学符号）

  如果数字输入值增加了足够大，则某些浏览器将自动将您的输入转换为指数符号。

• 最小/最大属性可以轻松绕过检验

  增量/减少按钮将使数字值在这些范围参数内。但是，结果是超过也没有任何提示，还是输出了值

• 不同的浏览器接受不同的字符。

  所有浏览器都不一样。让我们从最佳情况开始。

  • Chrome、 Microsoft Edge浏览器

    允许下列字符 （0-9、小数点.、负值-、指数符号的字符“+”和“ e”）

    
    这两个浏览器都将阻止您多次输入接受的非数字字符。但是，您可以将这些符号放在输入中的任何位置，例如将负符号放在数字之间，这会使数字无效

  • 火狐浏览器 and Safari

    

    没有任何限制。您可以输入任何想要的内容。

    所有这些浏览器都会显示一个内置的弹出窗口，以表明输入的值不是有效的数字，并且如果没有用户固定这些输入值，则无法点击提交按钮。内置验证在视觉上与为应用程序构建时的UX设计稿不一致。作为程序员，您可能会发现这是可以接受的，但是设计师和/或产品经理很可能不会。

有没有替代方案呢

在详细介绍何时使用数字输入之前，许多经验丰富的程序员知道的东西很重要：在处理数学相关的数字值时，即产品数量或人的年龄时，您才应使用数字输入。其他场景就不适宜了。

如果您要处理有条件的验证或该数字用于计算时，果断放弃数字输入吧。关于如何处理此问题有几个选择：

• 文章提到了一个可能的解决方案：使用<input type =“ text” inputmode =“ numeric” pattern =“ [0-9]*”>对于整数来说是一个不错的选择，但对于浮点而言不起作用十进制数字。

使用input type="text"，会失去增量/减少按钮。但是，权衡之下，确实是最佳的选择。

这里得到的收获就是不可能提供许多项目要求的同时使用数字输入的复杂功能。这是一个/或选择，而我看到的方式，最好放弃数字输入。