如何使用 JavaScript 隐藏 Android 键盘？答案

【问题标题】：How can I hide the Android keyboard using JavaScript?如何使用 JavaScript 隐藏 Android 键盘？
【发布时间】：2012-01-10 06:32:41
【问题描述】：

我想在 JavaScript 中隐藏 Android 虚拟键盘。有人建议做this:

$('#input').focus(function() {
  this.blur();
});

但如果键盘已经可见，这将不起作用。这是可以做到的吗？

【问题讨论】：

标签： javascript android keyboard

【解决方案1】：

我找到了一个更简单的解决方案，它既不需要添加元素，也不需要特殊类。在那里找到它：http://www.sencha.com/forum/archive/index.php/t-141560.html

并将代码转换为jquery：

function hideKeyboard(element) {
    element.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
    element.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
    setTimeout(function() {
        element.blur();  //actually close the keyboard
        // Remove readonly attribute after keyboard is hidden.
        element.removeAttr('readonly');
        element.removeAttr('disabled');
    }, 100);
}

您可以通过将打开键盘的输入传递给该函数来调用该函数，或者仅传递 $('input') 也应该可以工作。

【讨论】：

在装有 Android 2.3.6 的 Atrix 2 上，这个解决方案只对我有用一次 - 现在不能再工作了。很奇怪。
在运行 2.3.5 和 iPad 2 的 HTC EVO 上非常适合我
建议在修改为“禁用”周围添加一个条件，根据此示例：if (element.is('textarea')) { element.attr('disabled', 'true'); } 否则 hideKeyboard 帮助程序将导致文本输入闪烁。 flash 的结果将根据移动浏览器和应用于禁用文本区域的样式而有所不同。
在 Pixel XL 上效果很好！
将 attr 更改为 setAttribute 和 removeAttr 更改为 removeAttribute 以获得纯 JavaScript 解决方案。

【解决方案2】：

您需要做的是创建一个新的输入字段，将其附加到正文，将其聚焦并使用display:none 将其隐藏。不幸的是，您需要将它们包含在一些 setTimeouts 中才能使其正常工作。

var field = document.createElement('input');
field.setAttribute('type', 'text');
document.body.appendChild(field);

setTimeout(function() {
    field.focus();
    setTimeout(function() {
        field.setAttribute('style', 'display:none;');
    }, 50);
}, 50);

【讨论】：

你摇滚，rdougan，在互联网上跟踪我并解决我所有的问题。我期待您的 Ext.hideKeyboard，我认为它使用了这种技术。 :)
@HaggleLad 哪个版本的 Android？ Android 太牛逼了，所以很难跟上这些东西。
@rdougan 我已经在 2.3.6 上的 Nexus S 和 2.2.1 上的 HTC Wildfire S 上尝试过，但不幸的是，两者都无法正常工作。
据我所知，这在现代 Android 版本（4.0.3）上不起作用，并且它具有影响滚动的不幸后果（可能通过将输入附加到身体以外的东西，但由于它不起作用，所以没有多大意义）。
在 Lollipop devices 上为我工作，但我还添加了 document.body.removeChild(field);另外，对我来说不需要超时，同步运行所有代码。

【解决方案3】：

您现在可以在最新的浏览器上使用 inputmode=“none”。见：

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

【讨论】：

Inputmode="none" 可以很好地隐藏软键盘，但是当我使用 pda 的内置扫描仪阅读器时，我无法使用粘贴事件。
最佳答案。这就是我要找的东西。
在javascript中这个sn-p就像一个魅力：document.getElementById(objNextID).inputMode = "none";
这将是正确的答案。我们可以在 HTML 元素上设置inputmode="none"，在 (ngAfterViewInit) 视图启动后，我们可以将输入模式设置为我们想要的任何内容（主要是inputmode="text"）。它对我来说非常有用！
嗨@ingd我也面临同样的问题，你有没有找到可以与扫描仪阅读器一起使用的东西，可以粘贴到输入元素中

【解决方案4】：

这是一种适用于 Android 2.3.x 和 4.x 的防弹方法

您可以使用此链接测试此代码： http://jsbin.com/pebomuda/14

function hideKeyboard() {
  //this set timeout needed for case when hideKeyborad
  //is called inside of 'onfocus' event handler
  setTimeout(function() {

    //creating temp field
    var field = document.createElement('input');
    field.setAttribute('type', 'text');
    //hiding temp field from peoples eyes
    //-webkit-user-modify is nessesary for Android 4.x
    field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
    document.body.appendChild(field);

    //adding onfocus event handler for out temp field
    field.onfocus = function(){
      //this timeout of 200ms is nessasary for Android 2.3.x
      setTimeout(function() {

        field.setAttribute('style', 'display:none;');
        setTimeout(function() {
          document.body.removeChild(field);
          document.body.focus();
        }, 14);

      }, 200);
    };
    //focusing it
    field.focus();

  }, 50);
}

【讨论】：

酷！这适用于带有 Lollipop 的 Galaxy Tab 4。也适用于 iPhone 6 iOS 9.1
它在 Android 6.0 上运行良好，但在 iOS 9 上会导致视口放大。
如果你设置那么它会阻止 iOS 上的缩放。 . 见stackoverflow.com/questions/5002854/…
使用位置：固定以避免滚动。
使用默认浏览器在 android 6 设备上工作。

【解决方案5】：

对于任何使用 vuejs 或 jquery 和 cordova 的人，请使用 document.activeElement.blur() ;

hideKeyboard() {
    document.activeElement.blur();
}

..在我的文本框中，我只是调用了该函数：

对于VueJS： v-on:keyup.enter="hideKeyboard" 按回车键关闭安卓键盘。

对于 jQuery：

$('element').keypress(function(e) {
  if(e.keyCode===13) document.activeElement.blur();
}

【讨论】：

这就是我要找的。用它在我的 React PWA 中隐藏 android（希望是 ios）上的虚拟键盘。谢谢！

【解决方案6】：

只需模糊活动的焦点输入字段：

$(document.activeElement).filter(':input:focus').blur();

【讨论】：

要是这么简单就好了……（至少）在 Android 2.3.6 上不起作用
如果你是 2018 年的，这个答案很好用（至少在我的安卓设备上）。

【解决方案7】：

我根据QuickFix的答案做了一个jquery插件

(function ($) {
  $.fn.hideKeyboard = function() {
    var inputs = this.filter("input").attr('readonly', 'readonly'); // Force keyboard to hide on input field.
    var textareas = this.filter("textarea").attr('disabled', 'true'); // Force keyboard to hide on textarea field.
    setTimeout(function() {
      inputs.blur().removeAttr('readonly');  //actually close the keyboard and remove attributes
      textareas.blur().removeAttr('disabled');
    }, 100);
    return this;
  };
}( jQuery ));

用法示例：

$('#myInput').hideKeyboard(); 
$('#myForm input,#myForm textarea').hideKeyboard();

【讨论】：

这是最好的解决方案！

【解决方案8】：

如果您没有找到一个简单的解决方案来执行此操作，您可以随时从 javascript 调用 java 代码。教程和示例here。隐藏软键盘here。

...
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
....

public class JavaScriptInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    JavaScriptInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    public void hideKeyboard() {
        InputMethodManager imm = (InputMethodManager)mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
        ...
    }
}

javascript

<script type="text/javascript">
function hideAndroidKeyboard() {
    Android.hideKeyboard();
}
</script>

注意事项：

Javascript to Native Java 不能在 Simulator 2.3+ 版本上运行。 http://code.google.com/p/android/issues/detail?id=12987.

我不确定，但调用 hideKeyboard 时你可能不在主线程上。

如果您找不到简单的解决方案，当然是这样。

【讨论】：

我一直在寻找仅适用于 JavaScript 的解决方案。使用本机代码执行此操作并从 JavaScript 调用它对我来说并不完全。

【解决方案9】：

我已经解决了这个问题，用这个 "$(input).prop('readonly',true);"在之前显示

例如：

$('input.datepicker').datepicker(
                        {   
                            changeMonth: false,
                            changeYear: false,
                            beforeShow: function(input, instance) { 
                                $(input).datepicker('setDate', new Date());
                                $(input).prop('readonly',true);
                            }
                        }                         
                     );

【讨论】：

【解决方案10】：

View view = this.getCurrentFocus();
if (view != null) {  
    InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
    imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
}

【讨论】：

【解决方案11】：

VueJS 一个班轮：

<input type="text" ref="searchBox" @keyup.enter="$refs.searchBox.blur()" />

或者你可以用this.$refs.searchBox.blur();隐藏在JS中

【讨论】：

【解决方案12】：

rdougan 的帖子对我不起作用，但它是我解决方案的一个很好的起点。

function androidSoftKeyHideFix(selectorName){
    $(selectorName).on('focus', function (event) {
        $(selectorName).off('focus')
        $('body').on('touchend', function (event) {
            $('body').off('touchend')
            $('.blurBox').focus();
            setTimeout(function() {
                $('.blurBox').blur();
                $('.blurBox').focus();
                $('.blurBox').blur();
                androidSoftKeyHideFix(selectorName); 
            },1)
        });
    });
}

您需要在主体顶部添加一个输入元素，我将其归类为“blurBox”。它不能是 display:none。所以给它不透明度：0，和位置：绝对。我试着把它放在身体的底部，它没有用。

我发现有必要在 blurBox 上重复 .focus() .blur() 序列。我试过没有，它不起作用。

这适用于我的 2.3 Android。我想自定义键盘应用程序可能仍然存在问题。

在达到此目的之前，我遇到了许多问题。随后的焦点重新触发模糊/焦点存在一个奇怪的问题，这似乎是一个 android 错误。我使用 touchend 侦听器而不是模糊侦听器来绕过在非初始打开后立即重新关闭键盘的功能。我还遇到了键盘打字问题，导致滚动跳跃……这与父级上使用的 3d 变换有关。这是因为我试图解决模糊重火问题，最后我没有对 blurBox 进行模糊处理。所以这是一个微妙的解决方案。

【讨论】：

【解决方案13】：

给软键盘一些时间来关闭对我有用。

$('#ButtonCancel').click(function () {
    document.body.focus();

    setTimeout(function () {
        //close the dialog, switch to another screen, etc.
    }, 300);
});

【讨论】：

【解决方案14】：

只需禁用表单域：

document.getElementById('input').disabled

【讨论】：

最好使用只读，因为禁用不会在表单提交时发送到服务器。

【解决方案15】：

简单的 jQuery 插件防止键盘显示输入：

(function ($) {
    $.fn.preventKeyboard = function () {
        return this
            .filter('input')
            .on('focus', function () {
                $(this)
                    .attr('readonly', 'readonly')
                    .blur()
                    .removeAttr('readonly');
            });
    };
}(jQuery));

用法

这对于附加了一些日期选择器的日期字段很有用。

$('#my_datepicker_field').preventKeyboard();

在您的智能手机上试试下面的 sn-p！

（或查看https://jsfiddle.net/dtyzLjhw/）

(function($) {
  // Create plugin that prevents showing the keyboard
  $.fn.preventKeyboard = function() {
    return this
      .filter('input')
      .on('focus', function() {
        $(this)
          .attr('readonly', 'readonly')
          .blur()
          .removeAttr('readonly');
      });
  };

  $(document).ready(function($) {
    // Date field has datepicker attached.
    $('input[name=date]').datepicker();

    // Prevent showing keyboard for the date field.
    $('input[name=date]').preventKeyboard();
  });
}(jQuery));

/*!
 * Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 */

.datepicker {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr;
}

.datepicker-inline {
  width: 220px;
}

.datepicker-rtl {
  direction: rtl;
}

.datepicker-rtl.dropdown-menu {
  left: auto;
}

.datepicker-rtl table tr td span {
  float: right;
}

.datepicker-dropdown {
  top: 0;
  left: 0;
}

.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #999;
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-top: 0;
  position: absolute;
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
  top: -7px;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
  top: -6px;
}

.datepicker-dropdown.datepicker-orient-top:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999;
}

.datepicker-dropdown.datepicker-orient-top:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}

.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker td,
.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: #eee;
  cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #999;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999;
  cursor: default;
}

.datepicker table tr td.highlighted {
  background: #d9edf7;
  border-radius: 0;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background-color: #fde19a;
  background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
  background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
  border-color: #fdf59a #fdf59a #fbed50;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #000;
}

.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
  background-color: #fdf59a;
}

.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
  background-color: #fbf069 \9;
}

.datepicker table tr td.today:hover:hover {
  color: #000;
}

.datepicker table tr td.today.active:hover {
  color: #fff;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
  background: #eee;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
  background-color: #f3d17a;
  background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
  background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
  border-color: #f3e97a #f3e97a #edde34;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
  background-color: #f3e97a;
}

.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
  background-color: #efe24b \9;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
  background-color: #9e9e9e;
  background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
  background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: linear-gradient(to bottom, #b3b3b3, #808080);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
  border-color: #808080 #808080 #595959;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
  background-color: #808080;
}

.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
  background-color: #666666 \9;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
  background-image: linear-gradient(to bottom, #08c, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
  background-color: #0044cc;
}

.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
  background-color: #003399 \9;
}

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
  background: #eee;
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: #999;
  cursor: default;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
  background-image: linear-gradient(to bottom, #08c, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
  background-color: #0044cc;
}

.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  background-color: #003399 \9;
}

.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: #999;
}

.datepicker .datepicker-switch {
  width: 145px;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
  cursor: pointer;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
  background: #eee;
}

.datepicker .prev.disabled,
.datepicker .next.disabled {
  visibility: hidden;
}

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}

.input-append.date .add-on,
.input-prepend.date .add-on {
  cursor: pointer;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
  margin-top: 3px;
}

.input-daterange input {
  text-align: center;
}

.input-daterange input:first-child {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.input-daterange input:last-child {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 20px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  vertical-align: middle;
  background-color: #eee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px;
}

.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  color: #333333;
  font-size: 13px;
  line-height: 20px;
}

.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
  padding: 4px 5px;
}


/*# sourceMappingURL=bootstrap-datepicker.standalone.css.map */

<!-- Require libs to show example -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<!-- Simple form with two text fields -->
<form>
  <input name="foo" type=text value="Click to see keyboard" />
  <br/><br/><br/>
  <input name="date" type=text />
</form>

【讨论】：

【解决方案16】：

不幸的是，这可能不是最直接的解决方案，但似乎正在开发一个名为 Virtual Keyboard API 的新工具，旨在为开发人员在移动设备上的本机键盘方面提供更大的灵活性。

此新功能的 W3C working draft 看起来像是在去年 9 月才发布的，因此请注意，目前浏览器对此功能的支持很少。

使用这个新 API，可以使用以下代码显示和隐藏虚拟键盘：

navigator.virtualKeyboard.show();
navigator.virtualKeyboard.hide();

使用这些方法时必须满足一些special conditions。最值得注意的是，元素的virtualKeyboardPolicy（which is a new property，虚拟键盘 API 中也引入了）必须设置为manual。

这意味着当给定元素获得焦点时，键盘不会自动打开。您必须完全自己处理虚拟键盘的显示/隐藏。

要检查当前浏览器是否支持虚拟键盘 API，use the following code：

if ('virtualKeyboard' in navigator)

确实，对我而言，上述表达式在 Chrome 上的计算结果为 true，但在 FireFox 中（还没有）。

不过，这是意料之中的，因为 according to the Chrome Platform Status 该功能是在 2021 年 9 月 21 日刚刚发布的 Chrome v94 中提供的，因此其他浏览器需要一段时间才能实现它（也就是说，如果他们曾经这样做过）：

【讨论】：

【解决方案17】：

我有点晚了，但我想分享一个适用于 Android 2.5.x+ 和 iOS 7 的解决方案。

我最重要的是在方向更改时关闭键盘。这会在任何浏览器方向更改后产生可恢复的（意味着大部分是优雅的）状态。

这是咖啡脚本：

@windowRepair: (mobileOS) ->
  activeElement = document.activeElement.tagName
  if activeElement == "TEXTAREA" or activeElement == "INPUT"
    $(document.activeElement).blur()
    #alert "Active Element " + activeElement + " detected"
  else
    $('body').focus()
    #alert "Fallback Focus Initiated"
  if mobileOS == "iOS"
    window.scrollTo(0,0)
  $('body').css("width", window.innerWidth)
  $('body').css("height", window.innerHeight)

我希望这对某人有所帮助。我知道我花了很多时间来弄清楚它。

【讨论】：

【解决方案18】：

HTML

<input type="text" id="txtFocus" style="display:none;">

脚本

$('#txtFocus').show().focus().hide();
$.msg({ content : 'Alert using jquery msg' });

【讨论】：

【解决方案19】：

我设法让它与以下内容一起工作

document.body.addEventListener( 'touchend', function(){
    if( document.getElementById('yourInputFiled') )
        document.getElementById('yourInputFiled').blur();    
});

输入字段的侦听器中的 preventDefault() 和 stopPropagation()

【讨论】：

【解决方案20】：

您无法使用 js 正确隐藏键盘，因为它是一个操作系统问题，因此您可以轻松“隐藏”键盘的一件事是，您可以使用输入元素而不是使用任何“非输入html元素”一个key listener元素，只需添加[tabindex]属性，然后你就可以轻松监听keydown和keyup事件，并将“$event.target.value”存储在变量中以获取输入。

【讨论】：

【解决方案21】：

这是我的工作（来自https://github.com/danielnixon/oaf-side-effects）：

/**
 * Hide the on-screen keyboard on touch devices like iOS and Android.
 *
 * It's useful to do this after a form submission that doesn't navigate away from the
 * current page but does update some part of the current page (e.g. dynamically updated
 * search results). If you weren't to do this the user might not be shown any feedback
 * in response to their action (form submission), because it is obscured by the keyboard.
 *
 * To hide the keyboard we temporarily set the active input or textarea to readonly and
 * disabled. To avoid a flash of readonly/disabled styles (often a gray background) you
 * can hook into the [data-oaf-keyboard-hack] html attribute. For example:
 *
 * ```
 *  // Readonly/disabled styles shouldn't be applied when this attribute is present.
 *  [data-oaf-keyboard-hack] {
 *    background-color: $input-bg !important;
 *  }
 * ```
 *
 * Note that lots of people simply `blur()` the focused input to achieve this result
 * but doing that is hostile to keyboard users and users of other AT.
 *
 * Do you need to use this?
 *
 * 1. If your form submission triggers a full page reload, you don't need this.
 * 2. If your form submission explicitly moves focus to some other element, you
 * don't need this. For example you might move focus to some new content that
 * was loaded as a result of the form submission or to a loading message.
 * 3. If your form submission leaves focus where it is, you probably want this.
 */
export const hideOnscreenKeyboard = (): Promise<void> => {
  // TODO: use inputmode="none"?

  // eslint-disable-next-line no-restricted-globals
  const activeElement = document.activeElement;
  const inputType =
    activeElement instanceof HTMLInputElement
      ? activeElement.getAttribute("type")
      : undefined;

  if (
    activeElement !== null &&
    activeElement instanceof HTMLElement &&
    // Don't bother with input types that we know don't trigger an OSK.
    inputType !== "checkbox" &&
    inputType !== "radio" &&
    inputType !== "submit" &&
    inputType !== "reset" &&
    inputType !== "button"
  ) {
    // Blur the active element to dismiss the on-screen keyboard.
    activeElement.blur();

    // Set an attribute that allows users to override readonly/disabled styles via CSS.
    // This input will be readonly/disabled for only a fraction of a second and we
    // want to avoid the flash of readonly/disabled styles.
    activeElement.setAttribute("data-oaf-keyboard-hack", "true");

    // Some older Android browsers need extra encouragement.
    // See https://stackoverflow.com/a/11160055/2476884
    const originalReadonly = activeElement.getAttribute("readonly");
    const originalDisabled = activeElement.getAttribute("disabled");

    // eslint-disable-next-line functional/immutable-data
    activeElement.setAttribute("readonly", "true");
    if (activeElement instanceof HTMLTextAreaElement) {
      // eslint-disable-next-line functional/immutable-data
      activeElement.setAttribute("disabled", "true");
    }

    return new Promise((resolve) => {
      setTimeout(() => {
        // Put things back the way we found them.
        originalReadonly !== null
          ? activeElement.setAttribute("readonly", originalReadonly)
          : activeElement.removeAttribute("readonly");

        if (activeElement instanceof HTMLTextAreaElement) {
          originalDisabled !== null
            ? activeElement.setAttribute("disabled", originalDisabled)
            : activeElement.removeAttribute("disabled");
        }

        activeElement.removeAttribute("data-oaf-keyboard-hack");

        // Restore focus back to where it was. Lots of people forget to do this.
        // Note that programmatically calling focus() will not trigger the
        // on-screen keyboard to reemerge.
        activeElement.focus();

        resolve();
      });
    });
  } else {
    return Promise.resolve();
  }
};

【讨论】：

【解决方案22】：

角度版本：

export component FooComponent {
  @ViewChild('bsDatePicker') calendarInput: ElementRef;

  focus(): void {
    const nativeElement = this.calendarInput.nativeElement;

    setTimeout(() => {
      nativeElement.blur();
    }, 100);
  }
}

和模板：

<input
   #bsDatePicker
   bsDatepicker
   type="text"
   (focus)="focus()"/>

【讨论】：

【解决方案23】：

您可以在Vue.js 中使用@keyup 功能轻松实现此功能...

<input @keyup.enter="closeMobileKeyboard($event)"/>

function closeMobileKeyboard(event) {
  event.target.blur();
}

【讨论】：

【解决方案24】：

在尝试了此页面上的所有答案后，这对我有用：

function HideVirtualKeyboard(element_id) {
   // Set the input field to read-only and then back to normal.
   $("#" + element_id).attr("readonly", "readonly");
   setTimeout(function() { $("#" + element_id).removeAttr("readonly"); }, 1);
}

调用它：

HideVirtualKeyboard("input");

当我尝试模糊输入字段时，它隐藏了键盘，但由于我总是需要将焦点放在输入字段中，所以一旦我再次聚焦，键盘就会立即恢复。通过将其设置为只读然后恢复正常，它会隐藏键盘但不会失去焦点。

【讨论】：

【解决方案25】：

检查一下，保证且简单！

当您不希望键盘显示时，将“只读”属性添加到输入字段

 $("#inputField").attr("readonly","readonly");

点击时重置

     $("#inputField").click(function () {
              $(this).removeAttr("readonly");
              $(this).focus();  
      });

【讨论】：