关闭在iPad上的键盘在div contenteditable [英] Closing keyboard on iPad in div contenteditable

问题描述

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

Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??

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

Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/

I当用户点击按钮时，我想关闭键盘。

I'd like to have the keyboard close when a user clicks on the button.

任何想法都非常感激。

谢谢。

推荐答案

正如您在评论中提到的， element.blur（）遗憾的是，它不适用于可编辑的div。但您可以将焦点移动到实际输入字段并立即将其删除：

As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:

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

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

(This uses your jsFiddle HTML code).

此方法存在缺点：您需要另一个输入字段（您无法将其设置为 display：hidden 或 visibility：hidden ，但你可以将它的大小设置为0和不透明度：0 ）。此外，当调用上述处理程序时，视图可以滚动到此输入字段的位置。因此，您需要将第二个输入字段放在可编辑div的下一个或后面。

There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.

您还需要处理未被目标定位的输入字段上一个/下一个按钮：设置为禁用。

You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.

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

对于聚焦/模糊，您需要启用该字段：

For focussing/blurring you will then need to enable the field:

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

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

However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.

这篇关于关闭在iPad上的键盘在div contenteditable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！