强制数字键盘在ipad上为contenteditable元素

Question

我在保留应用程序的几个部分中使用了contenteditable。由于我们正在记录时间，当然，我希望键盘能够自动切换到ipad用户的数字键盘。我已经尝试将所有属性添加到我能想到的元素中，例如：

• 类型=数目
• 类型=电话
• 图案= [0-9] *

但是ipad仍会加载默认键盘。

以下是一个例子：

<div class="editable validate numbers-only" contenteditable="true" type="number" pattern="[0-9]*">3</div>

我可以使用任何技巧来显示我的ipad用户的数字键盘吗？

Answer 1

我在this帖子中读到，您可以使用\ d *模式使数字键盘出现在iOS上，因此带有数字键盘的基本形式如下所示：

<form>
    <input type="text" pattern="\d*">
    <button type="submit">Submit</button>
</form>     

在输入表单信息时，这将导致数字键盘自动出现在iOS上。

现在，我非常确定我们可以对此进行推断，并说我们可以在contenteditable div上使用\ d *来回答问题：

<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>

我希望这对你有用吗？

Answer 2

我不确定您在这里如何使用键盘吗？意思是，用户在增加/更新时间还是其他？如果是这样，请将输入类型设置为数字。这将告诉浏览器（Safari）仅输入数字，并告诉iOS自动显示数字键盘。

<?php
    $form = tr_form('purchase', 'create');
    echo $form->open();
    echo $form->text("Author");
    echo $form->close('Submit');
?>

结帐我有趣的项目，即体重计算器。检查它如何防止输入内的任何其他键以及在移动设备上显示数字键盘。 Weight Calculator

Answer 3

<form>
    <input type="text" pattern="\d*">
    <button type="submit">Submit</button>
</form>

然后

<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>

Answer 4

您可以在contenteditable元素上设置inputmode属性，以控制显示哪个键盘，至少在chrome和移动浏览器中。例如：

<div contenteditable=true inputmode=decimal><div>

我在这里测试了更多示例：https://notatoad.github.io/inputmodes.com/

Answer 5

<input type="tel" pattern="[0-9]*" novalidate>

这应该为您提供Android / iOS手机浏览器上的漂亮数字键盘，在桌面浏览器上禁用浏览器表单验证，不显示任何箭头微调器，允许前导零，在桌面浏览器以及iPad上允许逗号和字母