我怎样才能隐藏使用JavaScript的Android键盘？
我想隐藏JavaScript中的Android虚拟键盘。 有人build议这样做：
$('#input').focus(function() { this.blur(); }); 但是，如果键盘已经可见，这不起作用。 这是可以做的吗？
你需要做的是创build一个新的input字段，将其附加到正文，集中它，并使用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);
我发现了一个简单的解决scheme，既不需要添加元素也不需要特殊的类。 find它： 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); }
你通过传入键盘被打开的input来调用函数，或者传递$（'input'）也可以。
这是一个适用于Android 2.3.x和4.x的booletprouf方法
您可以使用以下链接testing此代码： 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); }
如果你没有find一个简单的解决scheme来做到这一点，你总是可以从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>
需要注意的事项：
JavaScript到本地Java不能在模拟器版本2.3 +。 http://code.google.com/p/android/issues/detail?id=12987 。
我不确定，但是当hideKeyboard被调用时你可能不在主线程中。
当然，如果你找不到一个简单的解决scheme。
只是模糊积极的焦点input领域：
$(document.activeElement).filter(':input:focus').blur();
rdougan的post没有为我工作，但这是我的解决scheme的一个很好的起点。
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) }); }); }
你需要一个input元素在身体的顶部，我分类为“blurBox”。 它不能显示：无。 所以给它不透明度：0，位置：绝对。 我试着把它放在身体的底部，它不起作用。
我发现有必要在blurBox上重复.focus（）.blur（）序列。 我尝试了没有，它不工作。
这适用于我的2.3 Android。 我想象自定义的键盘应用程序可能仍然有问题。
在到达此之前，我遇到了一些问题。 随后的重点突然出现了一个模糊/焦点，这看起来像一个Android的错误是一个奇怪的问题。 我使用了一个touchend监听器而不是一个模糊监听器，以避免在初始打开后立即closures键盘的function。 我也有一个键盘打字的问题，使滚动跳转…这是一个家长使用的3d变换。 这是从试图解决模糊问题的尝试中产生出来的，在这个问题中，我并没有将blurBox放在最后。 所以这是一个微妙的解决scheme。
我用这个“$（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上为我工作的解决scheme。
我的重点是closures方向改变的键盘。 这会导致任何浏览器方向更改后的可恢复（意思是优雅）状态。
这是coffeeScript：
@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;">
脚本
$('#txtFocus').show().focus().hide(); $.msg({ content : 'Alert using jquery msg' });
给软键盘一些时间来closures我的作品。
$('#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(); });
并在您的input字段的侦听器中的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 ));
用法示例：
$('#myInput').hideKeyboard(); $('#myForm input,#myForm textarea').hideKeyboard();
只要随意点击任何非input项目。 键盘将消失。
