web-dev-qa-db-fra.com

HTML Mobile - obligeant le clavier logiciel à se cacher

Je développe le site principal pour une entreprise de coupon et j'ai une page sur laquelle l'utilisateur n'a qu'à entrer le numéro de téléphone et l'argent dépensé. Nous avons créé un clavier amusant à l'écran, construit en Javascript, facile à utiliser et rapide. Cependant, je recherche une solution pour empêcher le clavier d'apparaître lorsque l'utilisateur fait la mise au point et entre du texte/des chiffres dans ces champs.

Je connais les attributs de type "numéro/téléphone/email" créés par HTML5. Cependant, au risque de paraître fou, je veux vraiment utiliser mon clavier à l'écran.

Remarque: ce site Web est principalement destiné aux tablettes.

Merci.

javascripthtml5ipadtablet
43
crodica

Étant donné que le clavier logiciel fait partie du système d'exploitation, le plus souvent, vous ne pourrez pas le masquer. De plus, sur iOS, le fait de masquer le clavier ne fait pas ressortir le focus de l'élément.

Cependant, si vous utilisez l'attribut onFocus sur l'entrée, puis blur() le texte saisi immédiatement, le clavier se cache et l'événement onFocus peut définir une variable sur définir quelle entrée de texte a été focalisée en dernier.

Puis modifiez votre clavier sur la page pour ne modifier que la dernière saisie de texte focalisée (vérification à l'aide de la variable), plutôt que de simuler une frappe.

40
Scott Stevens

La réponse de Scott S a parfaitement fonctionné.

Je codais un clavier téléphonique Web pour mobile et chaque fois que l'utilisateur appuyait sur un chiffre du clavier (composé d'éléments td span dans un tableau), le clavier logiciel s'ouvrait. Je voulais également que l'utilisateur ne puisse pas accéder à la zone de saisie du numéro composé. Cela a en fait résolu les deux problèmes en un seul coup. Le suivant a été utilisé:

<input type="text" id="phone-number" onfocus="blur();" />
47
thamind

Pour d'autres lecteurs/chercheurs:

Comme Rene Pot pointe sur ce sujet ,

En définissant le champ de saisie sur readonly="true" vous devez empêcher quiconque de taper quoi que ce soit, mais pouvoir néanmoins lancer un événement de clic dessus.

Avec cette méthode, vous pouvez éviter de faire apparaître le clavier "logiciel" et toujours lancer des événements de clic/remplir la saisie avec n’importe quel clavier à l’écran.

Cette solution fonctionne également bien avec les sélecteurs de date/heure qui généralement implémentent déjà des contrôles.

22
dagopert

Ces réponses ne sont pas mauvaises, mais elles sont limitées car elles ne vous permettent pas de saisir des données. Nous avions un problème similaire: nous utilisions des lecteurs de codes à barres pour saisir des données dans un champ, mais nous voulions supprimer le clavier.

C’est ce que j’ai mis ensemble, ça marche plutôt bien:

https://codepen.io/bobjase/pen/QrQQvd/

<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" /> 
<span id="fakecursor" />

<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />

#hiddenField {
  height:17px; 
  width:1px;
  position:absolute;
  margin-left:3px;
  margin-top:2px;
  border:none;
  border-width:0px 0px 0px 1px;
}

#cursorMeasuringDiv {
  position:absolute;
  visibility:hidden;
  margin:0px;
  padding:0px;
}

#hiddenField:focus {
  border:1px solid gray;  
  border-width:0px 0px 0px 1px;
  outline:none;
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes cursor {
    from {opacity:0;}
    to {opacity:1;}
}

// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
  // silently shift the focus to the hidden select box
  $("#hiddenField").focus();
  $("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});

// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
  // get the current value of the readonly field
  var currentValue = $("#visibleField").val();

  // and append the key the user pressed into that field
  $("#visibleField").val(currentValue + e.key);
  $("#cursorMeasuringDiv").text(currentValue + e.key);

  // measure the width of the cursor offset
  var offset = 3;
  var textWidth = $("#cursorMeasuringDiv").width();
  $("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));

});

Lorsque vous cliquez dans la zone <input>, Un curseur se trouvant dans cette zone est simulé, mais le focus est mis sur une zone <select> Vide. Les cases à cocher permettent naturellement aux touches de pression de prendre en charge le passage à un élément de la liste. Il suffit donc de rediriger la touche vers l'entrée d'origine et de décaler le curseur simulé.

Cela ne fonctionnera pas pour le retour arrière, la suppression, etc., mais nous n'en avions pas besoin. Vous pourriez probablement utiliser le déclencheur de jQuery pour envoyer l'événement de clavier directement à une autre zone de saisie quelque part, mais nous n'avions pas besoin de nous en préoccuper, alors je ne l'ai pas fait.

3
Bob Jase

exemple, comment je l'ai fait, après avoir rempli une longueur maximale, le flou de mon champ (et le clavier disparaîtra), si vous avez plus d'un champ, vous pouvez simplement ajouter la ligne que j'ajoute '//'

var MaxLength = 8;
    $(document).ready(function () {
        $('#MyTB').keyup(function () {
            if ($(this).val().length >= MaxLength) {
               $('#MyTB').blur();
             //  $('#MyTB2').focus();
         }
          }); });
1
Sportac

Je me bats contre le clavier logiciel sur le Honeywell Dolphin 70e avec Android 4.0.3. Je n’ai pas besoin du clavier car l’entrée provient du lecteur de code à barres intégré via le 'scanwedge', réglé sur générer des événements clés.

Ce que j’ai trouvé c’est que le truc décrit dans les réponses précédentes de:

input.blur();
input.focus();

fonctionne, mais seulement une fois, à l’initialisation de la page. Il met le focus dans l'élément d'entrée sans afficher le clavier virtuel. Cela ne marche PAS plus tard, par exemple Après un caractère de tabulation dans le suffixe du code à barres, l'événement onblur ou oninput est déclenché sur l'élément d'entrée.

Pour lire et traiter de nombreux codes à barres, vous pouvez utiliser un suffixe différent de TAB (9), par exemple. 8, qui n'est pas interprété par le navigateur. Dans le input.keydown événement, utilisez e.keyCode == 8 pour détecter un code à barres complet à traiter.

De cette façon, vous initialisez la page avec le focus dans l'élément d'entrée, avec le clavier masqué, tous les codes à barres vont à l'élément d'entrée et le focus ne quitte jamais cet élément. Bien entendu, la page ne peut pas comporter d’autres éléments de saisie (tels que des boutons), car vous ne pourrez alors pas revenir à l’élément de saisie de code à barres avec le clavier virtuel masqué.

Peut-être que le rechargement de la page après un clic de bouton pourra masquer le clavier. Utilisez donc ajax pour un traitement rapide des codes à barres et utilisez un bouton asp.net standard avec PostBack pour traiter un clic de bouton et recharger la page pour rétablir le focus sur l'entrée de code à barres avec le clavier masqué.

0
Roland