如何使用JavaScript隐藏Android键盘？

Question

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

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

但是,如果键盘已经可见,则此功能无效.这是可以做到的吗？

Answer 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')也应该有效.

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

Answer 3

这是一个适用于Android 2.3.x和4.x的booletprouf方法

您可以使用以下链接测试此代码: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);
}

Answer 4

您现在可以在最新的浏览器上使用 inputmode="none"。看：

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

Answer 5

只需模糊有效的焦点输入字段即可：

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

Answer 6

如果找不到解决方案，可以随时从javascript调用Java代码。这里有教程和示例。在此处隐藏软键盘。

...
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>

注意事项：

从Java到Native Java的Javascript无法在Simulator 2.3+版本上运行。http://code.google.com/p/android/issues/detail?id=12987。

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

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

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

Answer 8

对于将vuejs或jquery与cordova一起使用的任何人，请使用document.activeElement.blur（）;

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

..然后从我的文本框中调用该函数：

对于VueJS： v-on:keyup.enter="hideKeyboard" 按Enter键可关闭android键盘。

对于jQuery：

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