Как скрыть клавиатуру Android с помощью JavaScript?

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

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

Но это не работает, если клавиатура уже видна. Это что-то, что можно сделать?

Что вам нужно сделать, это создать новое поле ввода, добавить его в тело, сфокусировать его и скрыть его с помощью 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); 

Я нашел более простое решение, которое не требует ни добавления элемента, ни специального класса. Нашел его там: http://www.sencha.com/forum/archive/index.php/t-141560.html?s=6853848ccba8060cc90a9cacf7f0cb44

И преобразовал код в 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); } для 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') также должно работать.

Вот метод 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); } 

Если вы не найдете простого решения для этого, вы всегда можете просто вызвать 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); ... } } 

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.

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

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

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

Сообщение 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. Я пробовал это, и это не сработало.

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

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

Я исправил это так: «$ (input) .prop (« readonly », true); В beforeShow

Пример:

 $('input.datepicker').datepicker( { changeMonth: false, changeYear: false, beforeShow: function(input, instance) { $(input).datepicker('setDate', new Date()); $(input).prop('readonly',true); } } ); для $('input.datepicker').datepicker( { changeMonth: false, changeYear: false, beforeShow: function(input, instance) { $(input).datepicker('setDate', new Date()); $(input).prop('readonly',true); } } ); 
 View view = this.getCurrentFocus(); if (view != null) { InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(view.getWindowToken(), 0); } 

Я немного опаздываю, но я хотел бы поделиться решением, которое работает для меня на 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) 

Надеюсь, это поможет кому-то. Я знаю, что потратил много времени на то, чтобы понять это.

HTML

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

SCRIPT

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

Дать мягкую клавиатуру для закрытия работы для меня.

 $('#ButtonCancel').click(function () { document.body.focus(); setTimeout(function () { //close the dialog, switch to another screen, etc. }, 300); }); 

Мне удалось заставить его работать со следующими

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

И preventDefault () и stopPropagation () в слушателе для вашего поля ввода

Я сделал плагин 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 )); для (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(); 

Просто произвольно нажмите на любой элемент без ввода. Клавиатура исчезнет.