在iPhone上使用输入文本显示数字键盘

Question

注意使用 input type="number" 可以显示如下的数字键盘：

是否可以使用 input type="text" 显示相同的数字键盘？我不想使用 pattern="\d*" 来显示数字键盘，因为输入值可能包含小数点。

我想要使用 input type="text" 而不是 input type="number" 的原因是，如果我为数字字段输入非数字，则无法重新获得该值。例如，如果我输入 ABC，它将自动变为空。对我来说，使用 input type="text" 似乎更容易控制这种情况。

- red23jordan

---

使用 type="number" 有什么问题吗？ - deceze

嗨，deceze，我已经编辑了我的问题。谢谢。 - red23jordan

在HTML5.1中，有一个名为"inputmode"的属性，这是支持此功能的预期方式。因此，您可以使用<input type="text" inputmode="numeric" name="whatever">。但是，在HTML5中没有列出它，所以我猜它目前可能并没有得到广泛实现。 - Alohci

解决方案在这里：https://dev59.com/s18e5IYBdhLWcg3wucb-#25599024 - davidcondrey

@Alohci inputmode="numeric" 不再起作用。 - Ahmad Alfy

Answer 1

如果您的输入是真实的数字、整数或小数，请使用 HTML5 的 type="number" 输入。这将在 Android 设备上弹出正确的键盘（假设 Windows 手机也是如此）。

然后，关键是在该属性上放置一个 pattern="[0-9]*"，以强制 iOS 上的特殊数字键盘。请注意：

1. 这不会将小数点或负号标记为无效，因为模式属性在 type="number" 字段上实际上是无效的！而且
2. 这是获取 iOS 数字键盘的唯一方式。请查看字母键盘中的数字部分（如上面的截图）与真正的数字键盘之间的区别。

最后，请确保不要将数字类型字段用于不是真实数字（例如具有前导零的邮政编码或逗号或空格的产品代码）的输入。数字输入字段可能不提交非真实数字的值！（取决于浏览器/设备）

- davidelrizzo

---

使用 pattern="[0-9]*" 在 iPhone 上无法呼出相应的数字键盘，因为无法切换到字母或符号键盘，而且也没有小数点。 - Ikram Shah

Answer 2

在iOS上，苹果提供的数字键盘着实令人沮丧。不过，你可以通过以下方式解决：

inputmode="decimal"

在安卓上运行良好，当然。

:)

- Jeff Monteiro

---

iPhone里没有点号。 - KD.S.T.

哦耶！也许你需要使用掩码 ;) - Jeff Monteiro

面具是什么意思？ - KD.S.T.

更多信息：https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/ - Remco

Answer 3

请使用以下代码：

<input type="number" pattern="[0-9]*" />

- Behnam

---

使用 pattern="[0-9]*" 在 iPhone 上无法调出正确的数字键盘，也没有切换到字母或符号键盘的方法，而且也没有小数点。 - Ikram Shah

Answer 4

还有其他类型可以显示数字键盘。

如果使用 type="number"，则除数字外无法输入任何内容。但是如果使用 type="tel"，这是一个丑陋的 hack，但它能够工作。

下面是我的邮政编码示例：

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">

然而，在一些屏幕键盘上，"-"键可能会出现问题，你可以通过在JavaScript中指定字符数量后添加破折号来解决这个问题，例如：

// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
    var t = event.target, v = t.value;
    if (v.length == 2) { t.value = v + '-'; }
});

请原谅jQuery。 您可以使用type="text"和pattern属性，而不是使用type="tel"，但我尚未测试过。很可能在大多数浏览器中无法正常工作。

- Harry

---

在 iPhone 上使用 type="tel" 会弹出一个键盘，但该键盘无法输入小数点。 - anztenney

Answer 5

我在不同的iOS设备上测试了几个选项

最受支持的方法是使用pattern属性，例如<input type="text" pattern="[0-9]*" />，因为它可以在多个iOS版本上运行：

Iphone 13 (iOS 15.1)

iPhone 8（iOS 11.4）

iPhone 6（iOS 8.1）

如果您只需要支持iOS 12.2+，仅使用inputmode属性即可正常工作

- Guilherme Samuel

---

你知道如何在键盘上显示负号吗？ - gwynn causing

Answer 6

尝试这个解决方法。对我有用。

它会将类型转换为数字，然后再转换回文本。 这将强制 iOS 在第一个属性更改时切换到数字键盘。 setSelectionRange 用于选择输入值。

$(function(){

    $("input[type='text']").on('mouseup', function(e){
        e.preventDefault();
    });

    $("input[type='text']").on('focus click', function(e){
        $(this).prop('type', 'number');
        var obj = $(this);
        setTimeout(function(){
            obj.prop('type', 'text');
            document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
        }, 50);     
    });
});

- Jhonatan Muller

Answer 7

目前我还没有找到任何解决方案。

但是一个可能的技巧是使用type="number"，然后在javascript中更改它，使用document.getElementById("element").type="text";

但是这样做也会清除ABC，但它将接受数字、逗号和小数点。

- Venkat Reddy

---

是的，我用过那个，但键盘变成了默认键盘，数字键盘也没有打开 :( - red23jordan

你可以使用这个方法获得数字键盘，同时输入类型仍然为"text"，但是它不接受字母（ABC将被清除），并且数字键盘只会在第一次显示。如果您想要多次使用它，请将输入值存储在变量中并转换回输入类型“number”。 很抱歉，目前这是唯一的hack方法可用。 - Venkat Reddy