在 div contenteditable 中关闭 iPad 上的键盘答案

【问题标题】：Closing keyboard on iPad in div contenteditable在 div contenteditable 中关闭 iPad 上的键盘
【发布时间】：2012-02-15 11:30:40
【问题描述】：

有没有办法强制 iPad 上的键盘在 div 'contenteditable' 模糊时关闭？？

这是一个基本的 jsfiddle：http://jsfiddle.net/j_tufte/7HDmN/

我希望在用户单击按钮时关闭键盘。

任何想法都非常感谢。

谢谢。

【问题讨论】：

标签： javascript ipad contenteditable

【解决方案1】：

正如您在评论中提到的，element.blur() 很遗憾不适用于可编辑的 div。但您可以改为将焦点移至实际输入字段并立即再次将其移除：

$('#otherBox').on('click', function(){
    $('#orInput').focus().blur();
});

（这使用您的 jsFiddle HTML 代码）。

这种方法有缺点：您需要另一个输入字段（您不能将其设置为display: hidden 或visibility: hidden，但您可以将其大小设置为0 和opacity: 0）。此外，当调用上述处理程序时，视图可能会滚动到此输入字段的位置。因此，您需要将第二个输入字段放在可编辑 div 的旁边或后面。

您还需要注意输入字段不是上一个/下一个按钮的目标：将其设置为禁用。

<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />

为了聚焦/模糊，您需要启用该字段：

$('#otherBox').on('click', function(){
    $('#orInput').removeAttr("disabled")
                 .focus().blur().attr("disabled", "disabled");
});

但是，这绝对是一种解决方法。我还没有找到任何其他解决方案（例如，删除 contenteditable 属性不起作用）但我非常想听听其他想法。

【讨论】：

太棒了！在这里实际使用可能太笨重了，但这很聪明。谢谢！

【解决方案2】：

您应该能够做到这一点——将事件侦听器附加到按钮并将其用于blur() 导致键盘弹出的输入字段（使用 JavaScript 获取该元素的句柄，然后将其称为 @ 987654323@ 方法）。据说这会关闭 iPad 键盘。

【讨论】：

na，我尝试了几种模糊的实现，div 'texteditable' 不像普通输入那样响应模糊。相应地更新了 jsfiddle：jsfiddle.net/j_tufte/7HDmN。谢谢你！