HTML Mobile -forcer le clavier souple à cacher

Scott S réponse a parfaitement fonctionné.

J'ai été codage basé sur le web clavier de téléphone mobile, et chaque fois que l'utilisateur appuie sur une touche du clavier (composé de td span éléments dans un tableau), les softkeyboard pop up. Je tenais également à l'utilisateur de ne pas être en mesure de puiser dans la zone de saisie du numéro composé. En fait, cela a résolu ces deux problèmes en 1 coup. Les suivants ont été utilisés:

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

Ces réponses ne sont pas mauvaises, mais elles sont limitées, car elles ne sont pas réellement vous permettre de saisir des données. Nous avons eu un problème similaire où nous avons été à l'aide de lecteurs de code à barres pour entrer des données dans un champ, mais nous avons voulu supprimer le clavier.

C'est ce que j'ai mis ensemble, cela fonctionne assez 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 <input> boîte, il simule un curseur dans cette zone, mais met vraiment l'accent sur un vide <select> boîte. Sélectionnez les boîtes naturellement les touches utilisées pour le soutien de sauter à un élément dans la liste, donc c'était seulement une question de changement d'itinéraire de la touche à l'entrée d'origine et la compensation de la simulation curseur.

Cela ne fonctionne pas pour revenir en arrière, supprimer, etc... mais nous n'avons pas besoin de ceux-ci. Vous pourriez probablement utiliser jQuery déclencheur pour envoyer un événement clavier directement à une autre zone de saisie de quelque part, mais nous n'avons pas besoin de s'embêter avec que donc je ne l'ai pas fait.

Je ne pouvais pas utiliser certaines des suggestions fournies.

Dans mon cas, j'avais Google Chrome utilisé pour afficher un Oracle APEX de l'Application.
Il y avait des champs de saisie qui vous a permis de commencer la saisie d'une valeur et d'une liste de valeurs commencent à être affiché et la réduction que vous êtes devenu plus spécifique dans votre frappe. Une fois que vous avez sélectionné l'élément de la liste des options disponibles, l'accent doit toujours être sur le champ de saisie.

J'ai trouvé que ma solution était facile à faire avec un événement personnalisé qui déclenche un message d'erreur personnalisé comme suit:

throw "throwing a custom error exits input and hides keyboard";