Question

我在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

Answer 1

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

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

它将隐藏虚拟键盘。

Answer 2

来自here

这是不言自明的。第二行将解除所有输入字段的重点，它依赖于jQuery。我发现在单个聚焦文本字段上调用blur（）并不总是有效。这些行中的任何一行都应该独立工作，但它们一起不能停止！

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

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

Answer 4

尝试在页面中添加另一个可聚焦元素（例如：<select>）（将其高度设置为0以使其不可见但可聚焦），并在返回false之前将焦点移至该元素。

Answer 5

感谢您Hosh Sadiq和techfoobar帮助我。实际上我做了以下工作。它不影响此元素上方或下方的css。

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

再次感谢。：）

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

Answer 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

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

7 个答案: