Comment masquer le clavier Android à l'aide de JavaScript ?

Question

Je voudrais masquer le clavier virtuel d'Android en JavaScript. Quelqu'un a suggéré de faire ce :

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

Mais cela ne fonctionne pas si le clavier est déjà visible. Est-ce que cela peut être fait ?

Answer 1

J'ai trouvé une solution plus simple qui ne nécessite ni l'ajout d'un élément ni une classe spéciale. Je l'ai trouvée là : http://www.sencha.com/forum/archive/index.php/t-141560.html

Et converti le code en 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);
}

Vous appelez la fonction en lui passant l'entrée à partir de laquelle le clavier a été ouvert, ou le simple passage de $('input') devrait également fonctionner.

Answer 2

Ce que vous devez faire, c'est créer un nouveau champ de saisie, l'ajouter au corps, le mettre en évidence et le masquer à l'aide de la fonction display:none . Pour que cela fonctionne, vous devrez malheureusement les enfermer dans des 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);

Answer 3

Voici une méthode infaillible qui fonctionne pour Android 2.3.x et 4.x

Vous pouvez tester ce code en utilisant ce lien : 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);
}

Answer 4

Vous pouvez désormais utiliser inputmode="none" sur les navigateurs récents. Voir :

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 5

Pour tous ceux qui utilisent vuejs ou jquery avec Cordova, utilisez document.activeElement.blur() ;

hideKeyboard() {
    document.activeElement.blur();
}

et à partir de ma zone de texte, j'appelle simplement cette fonction :

Pour VueJS : v-on:keyup.enter="hideKeyboard" En appuyant sur le bouton d'entrée, vous fermez le clavier Android.

pour jQuery :

$('element').keypress(function(e) {
  if(e.keyCode===13) document.activeElement.blur();
}