How can I hide the Android keyboard using JavaScript? How can I hide the Android keyboard using JavaScript? android android

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