一旦用户在移动设备上提交表单，软键盘就会自动消失答案

【问题标题】：Making soft keyboard automatically disappear once user submits a form on a mobile device一旦用户在移动设备上提交表单，软键盘就会自动消失
【发布时间】：2016-03-17 15:06:02
【问题描述】：

这是关于具有字典查找功能的常规响应式网站。该页面由一个输入文本框和一个相邻的提交按钮组成。目前，如果您在移动浏览器中打开页面并点击文本框，软键盘会自动启动，这是可取的。但不可取的是，即使在用户点击软键盘上的enter 键后，键盘仍保持打开状态。我知道必须有一些方法来改变它。这种情况是否需要特殊的 Android/iOS 特定库或其他东西？我可以在按钮的onclick() 中添加一些东西来实现它吗？如果是这样，可以使用什么功能？请注意，当点击页面提交按钮时，键盘消失得很好......它只是软键盘输入键，即使它成功提交了表单，它也不会对其自身产生影响。

我尝试了以下方法但失败了：

function lookup_check(lookupterm){
    close_kb();
    $('#word').blur();
    if(lookupterm != ""){ lookup_word(lookupterm); }
    else{
        var testing = $('#word');
        testing.addClass('empty');
        setTimeout(function(){ testing.removeClass('empty'); },500);
    }
}

调用上述函数的 HTML 如下：

<button class="btn btn-lg btn-primary lookup-submit" type="submit" id="lookup" onclick="lookup_check($('#word').val());" style="display: inline-block;">Lookup</button>

P.S.：我们非常确定，这是一个桌面网站，而不是一个应用程序。

更新：@NovaLogic 提出的线程上已接受的答案已被声明为不能在所有版本的 Android 中始终如一地工作。此外，我正在寻找一些方法来实现这一点，不仅在 Android 上，而且在 iOS/Windows 设备上。所以，不，这个问题不是重复的。

【问题讨论】：

你可以使用$(form).on('submit', function() { $(input).blur(); });
How can I hide the Android keyboard using JavaScript?的可能重复
@Novocaine：我已经尝试过$('#word').blur; 技巧，希望它能将焦点从文本框移开，但键盘保持不动。 ://
这听起来像是您的测试设备中的一个错误。这在过去对我有用。
您实际上使用的是$('#word').blur(); 而不是您上面输入的$('#word').blur;，对吗？

标签： javascript jquery

【解决方案1】：

你可以使用

$('form').on('submit', function() {
  $('input').blur();
});

一旦提交就失去对按钮的关注

【讨论】：

感谢您提供快速而干净的帮助！干杯。 :)

【解决方案2】：

我来这里是为了在我的 React 应用中解决同样的问题。所以在没有 jquery 的情况下提供答案。

希望这对面临类似问题的其他人有所帮助。

解决方案是在用户点击软/虚拟键盘中的“开始”按钮/图标时使活动输入元素模糊。

这将使虚拟键盘消失。

示例

假设你有以下表格：

<form onSubmit={this.handleSubmit}>
  <input aria-label="Search site" autoCorrect="off" id="my-input-box"
    placeholder="Search country..."
    type="search"/>
  <input type="submit" value="Submit">
</form>

使虚拟键盘消失的onsubmit处理程序示例：

handleSubmit = (event) => {
  event.preventDefault();  // Prevent default action of submitting data to web server
  document.activeElement.blur();
}

或者，您可以通过 id 获取元素并对其进行模糊处理。

handleSubmit = (event) => {
  event.preventDefault();  // Prevent default action of submitting data to web server
  const myInputBox = document.getElementById('my-input-box');
  if (myInputBox) {
    myInputBox.blur();
  }
}

【讨论】：