如何在移动应用程序中显示文本输入字段的数字键盘

Question

我正在使用Cordova + react js来构建Android应用，并且需要在输入字段上呈现货币编号。当input field聚焦时，它会显示一个数字键盘。

用户输入一些数字后，它将把数字格式化为文本字符串。例如，如果用户键入394,333.2930，它将呈现为$394,333.293。对我来说，格式化字符串没有问题。问题是如何显示text输入字段的数字键盘。

我知道它适用于number类型的输入，但是它不允许用户键入,或货币符号。同样在数字输入字段中，用户可以键入多个点.，但我不希望这种情况发生。那么如何在Cordova应用程序中为文本输入字段显示仅数字键盘？我不确定这是Cordova的特定问题还是一般的Web应用程序问题。

我尝试使用tel，但是它仍然显示如下屏幕截图所示的字符。它们在每个数字后均显示为灰色字符。我该如何摆脱它们？

<input id="numberInput" type="tel" maxlength="6"/>

Answer 1

可能有多种方式，但是我也有完全相同的情况，我的工作方式如下。使用type="tel"并在keydown事件上添加检查以处理不需要的字符，例如"#", "+", "*", ";", ",", "-"。下面是代码：

HTML：

<input id="numberInput" type="tel" maxlength="6"/>

JS：

// validation for targetSalary input
var invalidChars = ["#", "+", "*", ";", ",", "-"];
numberInput.addEventListener("keydown", function(event) {
  if (invalidChars.includes(event.key)) {
    event.preventDefault();
  }
});

希望这对您有帮助！

更新：

在您更改了要求之后，并且根据此新要求，您想要从键盘上隐藏特殊字符 对此要求的答案是，您不能以常规方式隐藏键盘上的特殊字符。 也许，您可以通过创建自己的自定义键盘来实现。