如何在 Phonegap 应用程序的 jQueryMobile 页面中隐藏键盘？答案

【问题标题】：How to hide keyboard in jQueryMobile page in a Phonegap app?如何在 Phonegap 应用程序的 jQueryMobile 页面中隐藏键盘？
【发布时间】：2012-02-05 12:16:12
【问题描述】：

我在 iPhone 模拟器中隐藏键盘时遇到问题。我的 HTML 代码：

<form id="my_form">
    <input type="search" id="searchBar" />
</form>

jQuery 代码：

$("#my_form").submit(function() {
  one = $('#searchBar').val();
  console.log(one);
  doSearch(one);
  return false;
});

一切都按我的需要工作：我可以获得表单值并执行一些 Ajax。但是当函数返回 false 时，iPhone 模拟器中的虚拟键盘仍然可见。如何隐藏键盘？还有另一种方法吗？当用户在 iPhone 上搜索并按下“Go”时，我需要使用 Ajax 将数据传递给服务器。搜索结果应显示在同一页面中（已完成）。用户可以再次在同一页面中搜索。

请帮帮我。

谢谢，

--regeint

【问题讨论】：

标签： jquery jquery-mobile cordova

【解决方案1】：

您可以像这样简单地模糊输入，而不是将焦点切换到另一个元素：

$('#searchBar').blur();

它会隐藏虚拟键盘。

【讨论】：

【解决方案2】：

来自here

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

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

【讨论】：

【解决方案3】：

在 jQuery 中，如果您return false;，它将停止默认浏览器行为，在这种情况下，即提交表单以及关闭键盘。以下应该有效：

<form id="my_form">
    <input type="search" id="searchBar" />
    <div style="height:0;width:0;">
        <input id="focusable" type="checkbox" />
    </div>
</form>

jQuery:

$("#my_form").submit(function(){
    one = $('#searchBar').val();
    console.log(one);
    doSearch(one);
    $('#focusable').focus();
    return false;
});

【讨论】：

尝试做 techfoobar 所做的，但使用复选框而不是他建议的选择（选择可能会弹出一个空列表）。我已经更新了我的答案以反映这一点。

【解决方案4】：

尝试向您的页面添加另一个可聚焦元素（例如：<select>）（将其高度设置为 0，使其不可见但仍可聚焦），然后在返回 false 之前将焦点转移到该元素。

【讨论】：

【解决方案5】：

感谢 Hosh Sadiq 和 techfoobar 帮助我。实际上我做了以下事情并且它有效。它不会影响此元素上方或下方的 css。

$('.clr').after('<input type="checkbox" id="focusable" style="height:0; margin-left:-200px; clear: both;" />');
$('#focusable').focus();

再次感谢。 :)

【讨论】：

【解决方案6】：

我使用了 regeint 解决方案，但稍作修改它不起作用，因为我告诉 phonegap 允许在 Cordova.plist 中显示键盘而无需用户交互我将 KeyboardDisplayRequiresUserAction 设置为 NO

function hideTheKeyBoard() {
    $($.mobile.pageContainer).after('<input type="checkbox" id="focusable" style="height:0;margin-left:-200px;" />');
    $('#focusable').focus();// maybe .blur() would work too.
    $('#focusable').remove();
}

【讨论】：

【解决方案7】：

如果您不介意失去焦点，.blur() 方法可能是最有效的方法。但是，例如，如果您需要它来保持打开选项列表，因为它发生在预输入中。

您可以在下面看到我找到的解决此问题的方法。

$('#keepMeFocused').click(function() {
  $(this).attr('type', 'text');
  $('#hideKeyboard').removeAttr('disabled');
  $('#msg').show();
});
$('#hideKeyboard').click(function() {
  $('#keepMeFocused').attr('type', 'button').focus();
  $('#hideKeyboard').attr('disabled', true);
});

#keepMeFocused {
  box-sizing: border-box;
  width: 200px;
  height: 24px;
  background: none;
  border: solid 1px #ccc;
  padding: 0 4px;
  text-align: left;
}

#hideKeyboard {
  height: 24px;
  background: #666;
  border: solid 1px #666;
  border-radius: 2px;
  color: #fff;
  vertical-align: top;
}

#hideKeyboard[disabled] {
  background: #ddd;
  border-color: #ddd;
}

#keepMeFocused:not(:focus) ~ #msg {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="keepMeFocused" type="text">
<button id="hideKeyboard" disabled>Hide Keyboard</button>
<p id="msg">Keep me visible while input has focus</p>

更新：我修复了代码中的一个小错误并稍微简化了 JS

【讨论】：