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

How to hide keyboard in jQueryMobile page in a Phonegap app?

提问by regeint

I have a problem with hiding keyboard in the iPhone simulator. My HTML code:

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

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

jQuery code:

jQuery代码：

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

Everything works as I need: I can get form value and perform some Ajax. But when the function returns false, the virtual keyboard in the iPhone simulator is still visible. How to hide the keyboard? Is there another method to do that? I need to pass data to the server using Ajax when the user searches and presses 'Go' on the iPhone. The search result should be shown in the same page (already done). The user can again search in the same page.

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

Please help me.

请帮我。

Thanks,

谢谢，

--regeint

--regeint

采纳答案by regeint

Thank you Hosh Sadiqand techfoobarfor helping me. Actually I did the following and it worked. It did not effect the css above or below this element.

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

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

Thanks once again. :)

再次感谢。:)

回答by vadimtrifonov

Instead of switching focus to another element you can simply blur your input like this:

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

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

It will hide the virtual keyboard.

它将隐藏虚拟键盘。

回答by Nisanth Sojan

from here

从这里

It's pretty self-explanatory. The 2nd line will de-focus all input fields, and it relies on jQuery. I found that calling blur() on the single focused textfield didn't always work. Either one of these lines should work independently, but both of them together cannot be stopped!

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

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

回答by Hosh Sadiq

In jQuery, if you return false;, it will stop the default browser behaviour, which, in this case, is both submitting the form as well as closing the keyboard. The following should work:

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

jQuery：

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

回答by techfoobar

Try adding another focusable element (ex: a <select>) to your page (set its height to 0 so that its not visible yet focusable), and shift focus to that element before returning false.

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

回答by Shereef Marzouk

I used regeint solution but modified a bit it doesn't work because i told phonegap to allow showing the keyboard without user interaction in Cordova.plisti set KeyboardDisplayRequiresUserActionto NO

我使用了 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();
}

回答by Daniel Abril

The .blur()method is probably the most effective one if you don't mind loosing the focus. But what if, e.g., you need it in order to keep a list of options open as it happens in a typeahead.

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

Bellow you can see the way I found to solve this problem.

波纹管你可以看到我发现解决这个问题的方法。

$('#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>

UPDATE: I fixed a little bug in the code and simplified the JS a bit

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