输入类型编号不适用于 ipad

Question

我正在创建仅接受数字的 ionic 输入。这适用于除 safari 和 ipad 之外的所有浏览器和设备。除了 numbers.I 尝试对输入事件进行正则表达式验证之外，我不希望用户输入任何内容，但这不会阻止用户输入字母。我尝试了 keydown 事件，但我没有在 keyDown 事件上得到 innerText。请帮忙

Answer 1

如果可以，请提供您输入的示例代码。但是你也可以试试这个

<ion-item>
    <ion-label color="primary">Inline Label</ion-label>
    <ion-input placeholder="Text Input" type="number"></ion-input>
  </ion-item>

根据Ionic Inputs

您可以使用 "text"、"password"、"email"、"number"、"search"、"tel" 或 "url" .作为输入类型。如果我弄错了你的问题，我很抱歉。请尝试提供代码示例。谢谢:)

Answer 2

你可以试试这个

<ion-input type="tel" inputmode="numeric" pattern="[0-9]*"></ion-input>

这将强制输入在 iOS 上处于数字模式，正则表达式只是为了确保它只会获得数字。据我所知，这不适用于 input="number"，但这是一个旧的解决方案（对我仍然有效）。因此，您可以尝试使用 number，如果它不起作用，则退回到 tel。

希望对您有所帮助 :D

Answer 3

我知道这是一个老问题，但我碰巧遇到了同样的问题，我注意到最后对我有用的答案没有提供，所以我会添加答案给下一个人。

<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">

This site 解释解决方案背后的原因，以防您感兴趣。

要点是 pattern="[0-9]*" 是触发 iOS 显示数字键盘的原因，而 min 和 numeric 是为了确保其他操作系统并且浏览器仍然可以很好地与 type="number".

编辑：iOS 12.2 的 iPad 不再支持 pattern="[0-9]*" 修复 - 也许改用 type=tel。

Answer 4

这对我有用：

<!-- HTML ->
<input type="number" onchange="allowOnlyNumbers()"/>

// js
function allowOnlyNumbers(e){
    // check input using regex
    var regex = RegExp(/[0-9]+/g);
    const test_result = regex.test(e.target.value);

    if(test_result){
      e.target.defaultValue = e.target.value;
    }else{
      e.target.value = e.target.defaultValue;
    }
}

输入类型编号不适用于 ipad

input type number not working on ipad

safari

ipad

ionic2