关闭在iPad上的键盘在div contenteditable

Question

有没有办法迫使iPad上的键盘关闭div''contenteditable'模糊？

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

我想在用户点击按钮时关闭键盘.

任何想法超级赞赏.

谢谢.

Answer 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属性不起作用)但我非常希望听到其他想法.