ipad - 在 ipad 上强制数字键盘用于 contenteditable 元素

Question

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

但 ipad 仍然加载默认键盘。

这是一个例子：

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

有什么技巧可以用来为我的 ipad 用户显示数字键盘吗？

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

我不确定您在这里如何使用键盘？意思是，用户是在添加/更新时间还是什么？如果有，请将输入类型设为数字。这将告诉浏览器（safari）这是仅用于数字的输入，它将告诉 iOS 自动显示数字键盘。

<input type="number">

查看我的有趣项目，称为体重计算器。检查它将如何防止输入中的任何其他键以及它会在移动设备中显示数字键盘。体重计算器

score 0 · Accepted Answer

<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>

score 0 · Accepted Answer

我在这篇文章中读到，您可以使用 \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>

我希望这对你有用吗？

score 0 · Accepted Answer

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

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

5 回答 5