当前位置：文江博客话题详情

在 div contenteditable 中关闭 iPad 上的键盘

发布于 2024-12-27 22:17:19 字数 234 浏览 2 评论 0原文

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

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

我想要当用户单击按钮时关闭键盘。

任何想法都非常感谢。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

窝囊感情。 2025-01-03 22:17:19

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

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

这使用您的 jsFiddle HTML 代码）。

这种方法有缺点：您需要另一个输入字段（您不能将其设置为 display:hidden 或 visibility:hidden，但您可以将其大小设置为 0和不透明度：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 属性不起作用），但我非常想听听其他想法。

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();
});

(This uses your jsFiddle HTML code).

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");
});

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.

回复收藏 0 原文