web-dev-qa-db-fra.com

Déclenchement manuel du clavier iPhone/iPad/iPod à partir de JavaScript

Je développe un éditeur de code HTML utilisant de simples DIV et capturant des événements. Lorsque j'utilise ceci sur l'iPad, le clavier ne s'affiche jamais, car je ne suis pas techniquement dans un champ modifiable. 

Existe-t-il un moyen de dire par programme à l'iPad que j'ai besoin d'un clavier?

javascriptiphonehtmlipadkeyboard
25
Joe Bienkowski

Si votre code est exécuté via quelque chose qui a été initié via une action de l'utilisateur, cela fonctionnera.

Par exemple;

cela fonctionne (clavier pop):

<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div>

cela ne fonctionne pas (l'entrée obtient une bordure mais pas de bruit de clavier):

<input type='text' id='foo'>
<script>
  window.onload = function() {
    $("#foo").focus();
  }
</script>
15
Howard

Placez une zone de texte transparente sur le contenu contentEditable. Le clavier s'ouvre dès que l'utilisateur active la zone de texte. 

Enregistrez un event listener sur la zone de texte pour l'événement focus et définissez la valeur visibilityof de la zone de texte sur hidden. Cela empêche le curseur clignotant.

Définissez la visibility de la zone de texte sur visible après que l'événement blur se soit produit.

Enregistrez des écouteurs d'événement supplémentaires pour keydown, keyup, keypressevents et traitez ces événements de la même manière, en les traitant dans la div contentEditable.

6
Tony Findeisen

Pour que le clavier soit visible sur les appareils iOS, vous devez vous concentrer sur un élément modifiable, tel que input ou textarea. De plus, l'élément doit être visible et la fonction .focus() doit être exécutée en réponse à une interaction de l'utilisateur, telle qu'un clic de souris.

Le problème est que nous ne voulons PAS que l’élément d’entrée soit visible ... Je l’ai manipulé pendant un certain temps et j’ai finalement obtenu le résultat que je recherchais.

Tout d’abord, créez un élément que vous souhaitez utiliser pour afficher le clavier - dans ce cas, un bouton et un élément d’entrée masqué: ( Working jsFiddle ou Test sur un périphérique mobile )

<button id="openKeyboard">Open Keyboard</button>
<input id="hiddenInput" style="visibility: hidden;">

Ensuite, utilisez le javascript suivant:

document.getElementById('openKeyboard').addEventListener('click', function(){
    var inputElement = document.getElementById('hiddenInput');
    inputElement.style.visibility = 'visible'; // unhide the input
    inputElement.focus(); // focus on it so keyboard pops
    inputElement.style.visibility = 'hidden'; // hide it again
});

Remarques:

  1. J'ai remarqué que le safari iOS défilait et zoomait automatiquement sur la zone de l'entrée. Assurez-vous donc d'utiliser le bon viewport et de positionner votre élément d'entrée à un emplacement approprié.
  2. Vous pouvez utiliser des CSS pour votre entrée, comme définir les variables opacity, height et width à 0. Cependant, si votre entrée est complètement masquée, cela ne fonctionnera plus, alors assurez-vous de laisser la variable padding ou border afin que quelque chose soit restitué (même s'il ne s'affiche pas en raison de l'opacité). Cela signifie également que vous ne devriez pas utiliser display:none pour le cacher, les éléments cachés ne sont tout simplement pas autorisés à être focalisés.
  3. Utilisez les événements clavier habituels (keydown, keypress, keyup) sur votre entrée masquée pour accéder à l'interaction de l'utilisateur comme vous le feriez normalement. Rien de spécial ici.
3
Yotam Omer

J'ai constaté que l'appel de Prompt("Enter some value") déclenche le clavier de mon iPad 2. Je ne sais pas si cela vous aidera ou non.

2
TimDog

Astuce de saisie proxy

J'ai imaginé une autre solution de contournement sale, mais qui fonctionne bien ... Le problème est basé sur le fait que si le clavier est déjà ouvert, le changement de focus ne ferme pas le clavier.

  1. Ajoutez une petite "entrée invisible du proxy" en haut à gauche de la page avec la position fixe (la position fixe empêche le scintillement, assurez-vous également que la taille de la police est supérieure à 16 pixels pour empêcher le zoom de la page iOS sur le focus)
  2. En cliquant sur le bouton, il suffit .focus() sur ce champ invisible. Le clavier va s'ouvrir ...
  3. Afficher ou rendre vos autres champs de saisie
  4. Maintenant, avec le clavier ouvert juste .focus() sur l'entrée désirée. Vous pouvez utiliser un petit délai setTimeout, par exemple 500 ms si nécessaire
1
Maciej Sawicki

Les réponses à ces questions suggèrent que ce n'est pas possible: Pourquoi @contenteditable ne fonctionne-t-il pas sur l'iPhone?

Un de mes collègues qui travaillait sur un projet similaire a fini par utiliser une zone de texte pour la version iPad de son éditeur et des divs/étendues contenteditable pour les navigateurs prenant en charge contenteditable. Peut-être que quelque chose de similaire fonctionnerait pour vous.

1
Greg

Voici une solution pour vous:

<input id="my-input" type="text" />

<script type="text/javascript">
    var textbox = document.getElementById('my-input');
    textbox.select();
</script>
0
Villi Katrih