How can I hide the Android keyboard using JavaScript?
You can now use inputmode=“none” on up to date browsers. See:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
What you need to do is create a new input field, append it to the body, focus it and the hide it using display:none
. You will need to enclose these inside some setTimeouts unfortunately to make this work.
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);
Here is a bullet-proof method that works for Android 2.3.x and 4.x
You can test this code using this link: 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);
}
I found a simpler solution that requires neither adding element nor a special class. found it there: http://www.sencha.com/forum/archive/index.php/t-141560.html
And converted the code to 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);
}
You call the function by passing it the input from which the keyboard was opened, or just passing $('input') should also work.