时间戳

首页 > 解决方案 > 如何在 React 中创建一个仅允许数字或空值的文本框，从而触发移动设备上的数字键盘？

javascript - 如何在 React 中创建一个仅允许数字或空值的文本框，从而触发移动设备上的数字键盘？

问题描述

StackOverflow 上有很多这样的问题，但没有一个能在同一个解决方案中满足我的所有要求。任何帮助表示赞赏。

问题

在我的 React 应用程序中，我需要一个具有以下特征的文本框：

  1. 它只允许输入数字 - 除了数字 0-9 之外，没有减号、小数位、字母或任何其他内容。
  2. 它会自动调出 iOS 和 Android 上的数字键盘
  3. 我可以进一步限制应该输入的数字，例如只允许 4 位数字
  4. 前导零会自动修剪，例如，如果用户键入 02，它应该更正为 2
  5. 它允许一个空文本框，并且可以区分空值和 0

当前代码

https://codepen.io/micahrl/pen/RwGeLmo

此代码允许输入非数字，并且只会将值解释为 NaN。例如，用户可以输入2forasdf并且页面会显示You typed: NaN。

此外，虽然页面最初加载时带有一个空文本框，但用户无法键入内容然后将其删除为空。尝试删除输入框中的所有文本会在框中放置 a 0。

最后，这段代码不能可靠地修剪前导零，这给我带来了特别的问题，因为我想将数字限制为四位数。键入01不会截断前导零；在某些浏览器上，输入01111会导致1111，这已经足够了，而在其他浏览器上，输入01111会导致0111，这是一个问题。

我试过的

因为我已经type="number"在 input 元素上设置了，如果有一个非数字添加到文本框中，event.target.valueinsetNumWrapper将是一个空字符串。这意味着我无法区分真正的空字符串（用户已删除所有文本）和无效输入（用户输入了非数字，例如asdf）。

我可以type="text"在输入元素上进行设置，但我认为我需要将其设置为number在 iOS 和 Android 等移动操作系统上获取数字键盘。

标签： javascriptreactjstypescriptmobile

解决方案

通过进一步的实验，以及@Keith 在评论中的一些帮助，我已经解决了几乎所有的问题。

我已经在我的问题中分叉了 codepen 并在 fork 中进行了这些更改：https ://codepen.io/micahrl/pen/GRjwqdO 。

检查输入有效性

@Keith 指出我validity.badInput（https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput）。有了这个，我可以区分空输入（用户键入内容然后将其删除）和错误输入（用户尝试添加非数字字符）。

这意味着我将其添加到的开头setNumWrapper()：

    if (event.target.value === "") {
      if (event.target.validity.badInput) {
        // Set the text box and number to the old value - ignore the bad input
        inputRef.current.value = String(num);
        setNum(num);
      } else {
        // The data in the text box was deleted - set everything to empty
        inputRef.current.value = "";
        setNum(NaN);
      }
      return;
    }

我还必须制作一个inputRefwith useRef()，并将其设置在<input>元素上。

这解决了 #1 中的大部分 #5（但请参阅下面的一个剩余小问题）。

修剪前导零

为此，我所要做的就是使用它在末尾inputRef的元素中设置值：<input>setNumWrapper()

inputRef.current.value = String(newNum);

无论如何，元素的<input>值始终是一个字符串，并且将数字转换为字符串会删除前导零（如果有的话）。

剩余问题：如果文本框为空，则允许无效输入

当文本框为空时，用户可以在其中输入非数字字符，setNumWrapper()甚至不会触发。如果你把aconsole.log()放在顶部setNumWrapper()，如果用户输入一个字母，它不会在日志中打印任何内容，但如果用户输入一个数字，它会打印到日志中。

这意味着我不能用它setNumWrapper()来解决这个问题。

但是，它也相对较小。在移动设备上，数字键盘出现，防止非数字输入。在桌面上没有什么能阻止用户用他们的键盘输入字母，但对于我的应用程序，很明显只允许使用数字，所以现在这已经足够了。

不过，如果有办法解决这个问题，我很想知道它。

推荐阅读