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

Posted 2023-03-05

【中文标题】在 ipad 上强制数字键盘用于 contenteditable 元素

【英文标题】：Force Number keyboard on ipad for contenteditable element

【发布时间】：2012-10-01 00:13:47

【问题描述】：

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

类型=数字 类型=电话 模式=[0-9]*

但 ipad 仍会加载默认键盘。

这是一个例子：

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

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

【问题讨论】：

我很困惑，这是用于 html 输入字段还是什么？

不，它用于内容可编辑的 HTML 元素，而不是 HTML 输入。所以我可以在不使用输入元素的情况下单击/点击元素及其可编辑。这是一个示例：html5demos.com/contenteditable

哦，好吧，这是一个该死的好问题。

如果您希望用户输入数字而不是其他任何内容，为什么要使用 contentEditable 元素而不是正确的 HTML 输入？

我们只是在尝试一些新的东西，看看我们能走多远。

【参考方案1】：

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

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

【参考方案2】：

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

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

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

【参考方案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>

【讨论】：

欢迎来到 ***。仅代码答案是低质量的答案。添加一些解释为什么此代码有效。

【参考方案4】：

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

<input type="number">

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

【参考方案5】：

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

我希望这对你有用吗？