Sélection de texte par programme dans un champ de saisie sur les appareils iOS (Safari mobile)

Comment sélectionnez-vous par programme le texte d'un champ de saisie sur les appareils iOS, par exemple iPhone, iPad exécutant Safari mobile?

Normalement, il suffit d'appeler la .select()fonction sur l' <input ... />élément, mais cela ne fonctionne pas sur ces appareils. Le curseur est simplement laissé à la fin de l'entrée existante sans aucune sélection.

input.setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select

Rien dans ce fil n'a fonctionné pour moi, voici ce qui fonctionne sur mon iPad:

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

Il est difficile de prouver un négatif, mais mes recherches suggèrent qu'il s'agit d'un bogue dans Mobile Safari.

Notez que focus () fonctionne, plus ou moins - bien que cela puisse nécessiter plus d'un tap pour réussir, et ce n'est pas nécessaire si vous essayez de répondre à un utilisateur tapant sur le champ en question car le tap lui-même donnera le champ concentrer. Malheureusement, select () n'est tout simplement pas fonctionnel dans Mobile Safari.

Votre meilleur pari peut être un rapport de bogue avec Apple .

Voir ce violon : (entrez du texte dans la zone de saisie et cliquez sur 'sélectionner le texte')

Il sélectionne du texte dans une zone de saisie sur mon iPod (5e génération iOS6.0.1), ouvre le clavier et affiche également le menu Couper / Copier / Suggérer ...

Utilisation de javascript simple. Je n'ai pas essayé cela avec jQuery

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

Notez que le nombre 999 n'est qu'un échantillon. Vous devez définir ces nombres sur le nombre de caractères que vous souhaitez sélectionner.

MISE À JOUR:

• iPod5 - iOS6.0.1 - Fonctionnement correct.
• iPad1 - iOS5.1.1 - Seul le texte sélectionné. Appuyez une fois sur la sélection pour ouvrir le menu Couper / Copier
• iPad2 - iOS4.3.3 - Seul le texte sélectionné. Appuyez une fois sur la sélection pour ouvrir le menu Couper / Copier

Pour les deux derniers, vous pouvez expérimenter en déclenchant un événement de clic sur l' inputélément

MISE À JOUR: (07-10-2013)

• iPod5 - iOS7.0.2 - Utilisation du violon dans le lien: Impossible de voir le texte saisi dans la zone de saisie. Appuyer sur select me redirige vers facebook.com (??? wtf ???) aucune idée de ce qui se passe là-bas.

MISE À JOUR: (14-11-2013)

• iOS 7.0.3: Merci au commentaire de binki mise à jour le .selectionStartet .selectionEnd ne fait le travail.

MISE À JOUR: (15-01-2015)

• iOS 8.xx: Merci au commentaire de Michael Siebert . Tiré du commentaire: j'ai dû écouter à la fois les événements de focus ET de clic, puis setTimeout / _. Debounce pour que cela fonctionne dans les deux cas: cliquez sur l'entrée ou sur le focus par tabulation

Désolé, dans mon article précédent, je n'ai pas remarqué le Javascript impliquant que vous vouliez une réponse en Javascript.

Pour obtenir ce que vous voulez dans UIWebView avec javascript , j'ai réussi à rassembler deux informations importantes pour que cela fonctionne. Je ne suis pas sûr du navigateur mobile.

1. element.setSelectionRange(0,9999); fait ce que nous voulons

2. L'événement mouseUp annule la sélection

Ainsi (en utilisant Prototype):

    input.observe ('focus', function () {
      this.setSelectionRange (0, 9999);
    });
    input.observe ('mouseup', fonction (événement) {
      event.stop ();
    });

fait l'affaire.

Mat

Il semble que le focus fonctionnera, mais uniquement lorsqu'il est appelé directement à partir d'un événement natif. l'appel du focus en utilisant quelque chose comme SetTimeout n'apparaît pas appeler le clavier. Le contrôle du clavier ios est très médiocre. Ce n'est pas une bonne situation.

Quelque chose comme ce qui suit fonctionne pour moi pour moi sur Webkit fourni avec Android 2.2:

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

Consultez le numéro 32865 de Chromium .

Avec iOS 7 sur iPad, la seule façon dont j'ai pu faire ce travail était de l'utiliser <textarea></textarea>au lieu du <input>champ.

par exemple

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

Comment empêcher l'utilisateur de modifier le texte à l'intérieur de la zone était plus difficile, car si vous créez une zone de texte en lecture seule, l'astuce de sélection ne fonctionnera plus.

Je suis devenu fou à la recherche de cette solution, alors que toutes vos réponses l'ont aidé à ouvrir une autre boîte de vers pour moi.

Le client voulait que l'utilisateur puisse tout cliquer et tout sélectionner , et aussi laisser l'utilisateur «tabuler» et tout sélectionner sur l'iPad (avec un clavier externe. Je sais, fou ...)

Ma solution à ce problème était de réorganiser les événements. Première mise au point , puis cliquez , puis touchez pour démarrer .

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  //$(this).css("color", "blue");
  e.preventDefault();
});

J'espère que cela aide quelqu'un, car vous m'avez beaucoup aidé d'innombrables fois.

Si vous utilisez des navigateurs compatibles HTML5, vous pouvez utiliser placeholder="xxx"dans votre inputbalise. Cela devrait faire le travail.