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

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();
  }
});

希望对您有所帮助！

更新：

由于您更改了要求并且根据此新要求，您希望从键盘中隐藏特殊字符 对此要求的回答是您不能以正常方式隐藏键盘中的特殊字符。 也许您可以通过创建自己的自定义键盘来实现。