web-dev-qa-db-fra.com

iPhone Mobile Safari: forcer l'ouverture du clavier

Il s'agit d'une application iPad HTML/CSS/JS (jQuery). J'ai un bouton qui glisse vers le bas d'un formulaire de saisie. Je voudrais concentrer l'utilisateur sur l'entrée, puis lancer le clavier.

C'est ce avec quoi je travaille, mais ne fonctionne pas:

$('#myFormField').focus();

Cela concentre effectivement l'entrée, mais ne parvient pas à lancer le clavier. N'est-ce tout simplement pas possible (pour des raisons de sécurité ou autre)?

Existe-t-il un moyen de forcer ou de simuler un utilisateur appuyant sur l'entrée (ou quoi que ce soit d'ailleurs)?

37
KrazyKen04

Ces liens peuvent peut-être vous aider:

4
Sylter

Essaye ça

Testé sur Safari iPhone 7 et iPhone 6 Plus, Android 4.4

et il a ouvert le clavier virtuel iOS avec succès lorsque j'ai appuyé sur le bouton.

état

1) créer un bouton pour déclencher un événement de pression de touche => $('.btn_abc')

2) créez une balise de saisie de texte et définissez l'ID sur cet élément => $('#search_input')

$( document ).ready(function() {

  var focusTextField = function(){
    console.log("focusElement");
  };

  var onKeypressHandler = function(){
    console.log("* * * keypress event handler")
    $('#search_input').blur().focus();
  };

  var onClickHandler = function() {
    $('.btn_abc').trigger('keypress');
  };

  $('#search_input').bind('focus', focusTextField);
  $('.btn_abc').bind('click', onClickHandler);
  $('.btn_abc').bind('keypress', onKeypressHandler);

});
3
jamy

Transformez ce bouton en champ de saisie, puis permutez instantanément la mise au point sur le champ de saisie principal. Le clavier s'ouvrira et restera ouvert. Voici un exemple d'utilisation d'un bouton comme vous l'avez demandé, en plaçant un champ de saisie transparent sur le bouton sur lequel l'utilisateur clique. Testé sur un iPhone 4 (iOS 6/7) et un téléphone HTC Windows.

L'entrée sur laquelle vous souhaitez que l'utilisateur se concentre:

<input id="main" />

Le bouton sur lequel l'utilisateur appuie (avec le champ de saisie superposé à l'aide de css):

<a>Button</a><input onfocus="FocusMain()" />

Swap focus instantanément:

function FocusMain()
{
    $("#main").focus();
}
2
user2638216