How can I hide the Android keyboard using JavaScript?
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.
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);}