jQuery mobile:关闭弹出窗口后隐藏虚拟键盘

Posted

技术标签:

【中文标题】jQuery mobile:关闭弹出窗口后隐藏虚拟键盘【英文标题】:jQuery mobile: Hide virtual keyboard after closing popup 【发布时间】:2013-02-04 00:04:50 【问题描述】:

我在一个项目中使用 jQuery mobile,需要一个带有 textarea 的弹出窗口:

<div data-role="popup" id="popupDialog" data-overlay-theme="none" data-theme="a" style="width: 350px; max-width:350px;" class="ui-corner-all" data-dismissible="false">
    <button id="dialogCloseButton" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</button>
    <div data-role="content" class="ui-corner-bottom ui-content" style="text-align: center; margin: auto;">
        <textarea id="textArea" data-theme="b" style="resize: none; max-width: 100%; max-height: 150px; width: 100%; height: 150px; padding-bottom: 5px;"></textarea>
        <button data-theme="a">Ok</button>
    </div>
</div>

我正在像这样打开弹出窗口:

$('#popupDialog').popup('open');

当我现在在文本区域中输入文本并使用按钮关闭弹出窗口时,虚拟键盘不会在运行 ios 6.1 的 iPad 上隐藏。

我试过这个hack,但对我不起作用。

当我在关闭弹出窗口之前模糊 textarea 时,textarea 将自动再次获得焦点(您可以使用“模糊”按钮在我的示例网站上进行测试)。

编辑:删除了示例链接。

【问题讨论】:

“我尝试了这个 hack,但对我不起作用。” - 您尝试了哪些技巧?因为那里有几个。 所有 hack 都涉及 blur() 和/或添加可聚焦元素并为其赋予焦点。这对我不起作用。 并非全部。你试过删除元素吗? 据我所知,他们只是删除了“人工”元素,而不是最初具有焦点的元素 顺便说一句:我的示例适用于 android 4.1 【参考方案1】:

这对我有用:

$('#textArea').blur();
$('#popupDialog').attr("tabindex",-1).focus();

【讨论】:

【参考方案2】:

这是不言自明的。第二行将分散所有输入字段的焦点,它依赖于 jQuery。我发现在单个焦点文本字段上调用 ​​blur() 并不总是有效。这两条线中的任何一条都应该独立工作,但不能同时停止!

var hideKeyboard = function() 
    document.activeElement.blur();
    $("input").blur();
;

【讨论】:

以上是关于jQuery mobile:关闭弹出窗口后隐藏虚拟键盘的主要内容,如果未能解决你的问题,请参考以下文章

如何在 jQuery Mobile 中等待弹出窗口关闭?

当用户在弹出窗口之外点击时,防止 JQuery Mobile 关闭弹出窗口

在jquery mobile中使用一个按钮关闭和打开弹出窗口

关闭弹出窗口并导航到 jQuery Mobile 中的另一个页面

jQuery Mobile 中的弹出窗口没有按预期工作,请咨询

在 jQuery Mobile 中激活弹出窗口