web-dev-qa-db-fra.com

Sélection par programme du texte 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 fonction .select() sur le <input ... />, mais cela ne fonctionne pas sur ces périphériques. Le curseur est simplement laissé à la fin de l'entrée existante sans sélection effectuée.

javascriptiphonehtmlsafariios
83
sroebuck
input.setSelectionRange(0, 9999);

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

92
jobwat

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);
28
nkrop

Il est difficile de prouver un résultat 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 qu'il puisse nécessiter plus d'un tap pour réussir, et ce n'est pas nécessaire si vous essayez de répondre à un tap sur le champ en question car le tap lui-même donnera le champ concentrer. Malheureusement, select () est simplement non fonctionnel dans Mobile Safari.

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

25
clozach

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. N'a 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 - Fonctionne bien.
  • iPad1 - iOS5.1.1 - Seul le texte est sélectionné. Appuyez une fois sur la sélection pour ouvrir le menu Couper/Copier
  • iPad2 - iOS4.3.3 - Seul le texte est 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'élément input

MISE À JOUR: (07-10-2013)

  • iPod5 - iOS7.0.2 - Utilisation du violon dans le lien: impossible de voir le texte tapé dans la zone de saisie. En appuyant sur sélectionner, je 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 mettre à jour que le .selectionStart et .selectionEnd fonctionne .

MISE À JOUR: (15-01-2015)

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

Désolé, dans mon post 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 IWebView avec javascript, j'ai réussi à rassembler deux informations importantes pour le faire fonctionner. 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

7
Matt

Il semble que le focus fonctionne, mais uniquement lorsqu'il est directement appelé à partir d'un événement natif. appeler 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.

3
yodaisgreen

Avec iOS 7 sur iPad, le seul moyen pour que cela fonctionne est d'utiliser réellement le champ <textarea></textarea> Au lieu du champ <input>.

par exemple.

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

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

1
Mikael Lepistö

Je suis devenu fou à la recherche de cette solution, alors que toutes vos réponses ont aidé cela m'a ouvert une autre boîte de vers.

Le client voulait que l'utilisateur puisse cliquer et sélectionner tout, et aussi laisser l'utilisateur onglet ' '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. D'abord Focus, puis Click, puis touchstart.

$('#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, comme vous m'avez beaucoup aidé à maintes reprises.

1
adnan tariq

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

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

Voir Chrome Numéro 32865 .

1
robocat