Как я могу скрыть клавиатуру Android, используя JavaScript?

Question

Я хотел бы скрыть виртуальную клавиатуру Android в JavaScript. Кто-то предложил сделать это :

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

Вот метод booletprouf, который работает для 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);
}

Answer 4

Просто размыть активное фокусированное поле ввода:

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

Answer 5

Для тех, кто использует vuejs или jquery с cordova, используйте document.activeElement.blur ();

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

.. а из моего текстового поля я просто вызываю эту функцию:

Для VueJS: v-on:keyup.enter="hideKeyboard" Нажатие кнопки ввода закрывает клавиатуру Android.

для jQuery:

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

Answer 6

Если вы не нашли простого решения для этого, вы всегда можете просто вызвать java-код из javascript. Учебник и пример здесь . Скрыть софт-клавиатуру здесь .

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

1008 * Javascript *

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

На что нужно обратить внимание:

Javascript для Native Java не будет работать на Simulator версии 2.3+. http://code.google.com/p/android/issues/detail?id=12987.

Я не уверен, но вы не можете быть в главном потоке при вызове hideKeyboard.

Это, конечно, если вы не можете найти простое решение.

Answer 7

Я сделал плагин jquery из ответа QuickFix

(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

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

Answer 9

Я исправил вот так: "$ (input) .prop ('readonly', true);" в beforeShow

Ex:

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

Answer 10

Пост 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'.Не должно отображаться: нет.Так что дайте ему непрозрачность: 0 и положение: абсолютное.Я попытался поместить его в нижней части тела, и это не сработало.

Я счел необходимым повторить последовательность .focus () .blur () на blurBox.Я попробовал это без, и это не работает.

Это работает на моем 2.3 Android.Я предполагаю, что у пользовательских приложений клавиатуры все еще могут быть проблемы.

Я столкнулся с рядом проблем, прежде чем прийти к этому.Возникла странная проблема с последующими фокусировками, вызывающими размытие / фокусировку, что выглядело как ошибка андроида.Я использовал слушателя касания вместо слушателя размытия, чтобы обойти функцию возобновления закрытия клавиатуры сразу после не начального открытия.У меня также была проблема с набором текста клавиатуры, заставляющим скролл прыгать вокруг ... который реализуется в виде трехмерного преобразования, используемого на родительском элементе.Это произошло из-за попытки обойти проблему размывания с размытием, когда я не размыл в конце blurBox.Так что это деликатное решение.