Programmgesteuertes Auswählen von Text in einem Eingabefeld auf iOS-Geräten (mobile Safari)

86

Wie wählen Sie programmgesteuert den Text eines Eingabefelds auf iOS-Geräten aus, z. B. iPhone, iPad, auf dem Mobile Safari ausgeführt wird?

Normalerweise reicht es aus, die .select()Funktion für das <input ... />Element aufzurufen , dies funktioniert jedoch auf diesen Geräten nicht. Der Cursor bleibt einfach am Ende des vorhandenen Eintrags, ohne dass eine Auswahl getroffen wird.

sroebuck
quelle
10
Ich sehe keinen Grund, warum ein Touch-Gerät die Relevanz der Vorauswahl von Text ändert. Was Sie über ein Touch-Gerät gesagt haben, gilt auch für ein Non-Touch-Gerät. Ich möchte Text vorab auswählen, wenn ein Benutzer ein Element berührt, um es zu bearbeiten. In den meisten Fällen möchte der Benutzer wahrscheinlich die vorhandenen Inhalte ersetzen. In diesem Fall kann er dies ohne weiteres Berühren und Ziehen tun. In anderen Fällen, wenn sie den vorhandenen Inhalt bearbeiten möchten, können sie die Auswahl aufheben oder ändern.
sroebuck
2
Leider funktioniert .focus (). Select () nicht.
sroebuck
2
Ich beginne ein Kopfgeld zu diesem Thema. Mein Ziel ist es, Benutzern das Klicken auf meinen Textbereich und das Tippen auf "Kopieren" zu erleichtern, um den Text in die Zwischenablage zu kopieren.
Dan Fabulich
Gleich hier ... es scheint viele Methoden zu geben, die in Mobile Safari nicht funktionieren. Select () und .focus () sind zwei davon.
@sroebuck schöne Antwort für David W. Keith! Daumen hoch!
Eyurdakul

Antworten:

94
input.setSelectionRange(0, 9999);

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

jobwat
quelle
3
Dies funktionierte für mich, musste aber das Stoppen des Mouseups bei denselben Eingaben beinhalten.
DuStorm
8
Dies funktionierte weder auf einem iPad noch auf einem iPhone für mich
Doug
4
Dies funktionierte nur bei mir, wenn ich .focus()die Eingabe vor dem Aufrufen ausgelöst habe input.setSelectionRange. Wenn Sie auf das focusEreignis am Eingang warten, denken Sie daran, eine Endlosschleife zu berücksichtigen.
Allieferr
10
Ein erwähnenswertes Gotcha: Dies funktioniert bei Textbereichen nicht, wenn das readonlyAttribut festgelegt ist.
JayPea
5
Ich habe über eine Stunde damit verbracht, mit verschiedenen Lösungen zu spielen. Das Aufrufen setSelectionRange()eines focusHandlers funktioniert, wenn Sie .focus()programmgesteuert auslösen. Wenn Sie jedoch manuell auf die Texteingabe unter iOS tippen, erfolgt die Auswahl nicht. Es genügt zu sagen, dass Sie nur setSelectionRange()innerhalb eines setTimeout von 0 aufrufen müssen und es wie erwartet funktioniert, unabhängig davon, was den Fokus auslöst.
30

Nichts in diesem Thread hat für mich funktioniert. Folgendes funktioniert auf meinem iPad:

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);
nkrop
quelle
das macht den f ** kin Trick! Danke dir! funktioniert mit 'click' event
saike 10.10.16
Vielen Dank!!
Vaclav Kusak
26

Es ist schwer, ein Negativ zu beweisen, aber meine Forschung legt nahe, dass dies ein Fehler in Mobile Safari ist.

Beachten Sie, dass focus () mehr oder weniger funktioniert - obwohl mehr als ein Tippen erforderlich sein kann, um erfolgreich zu sein, und es nicht erforderlich ist, wenn Sie versuchen, auf ein Tippen eines Benutzers auf das betreffende Feld zu antworten, da das Tippen selbst das Feld angibt Fokus. Leider wählen () ist einfach nicht funktional in Mobile Safari.

Ihre beste Wahl ist möglicherweise ein Fehlerbericht mit Apple .

Clozach
quelle
1
Unsere Tests zeigen dasselbe. Es ist ein Fehler / eine fehlende Funktion in der mobilen Safari.
Nir Levy
2
FWIW funktioniert in Chrome Desktop und Android Browser, die ebenfalls auf WebKit basieren.
Jrummell
24

Sehen Sie sich diese Geige an : (Geben Sie Text in das Eingabefeld ein und klicken Sie auf "Text auswählen".)

Es wählt Text in einem Eingabefeld auf meinem iPod (5. Generation iOS6.0.1) aus, öffnet die Tastatur und zeigt auch das Menü Ausschneiden / Kopieren / Vorschlagen ... an

Verwenden von einfachem Javascript. Habe dies nicht mit jQuery versucht

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

Beachten Sie, dass die Nummer 999 nur ein Beispiel ist. Sie sollten diese Zahlen auf die Anzahl der Zeichen einstellen, die Sie auswählen möchten.

AKTUALISIEREN:

  • iPod5 - iOS6.0.1 - Funktioniert einwandfrei.
  • iPad1 - iOS5.1.1 - Nur Text ausgewählt. Tippen Sie einmal auf Auswahl, um das Menü Ausschneiden / Kopieren zu öffnen
  • iPad2 - iOS4.3.3 - Nur Text ausgewählt. Tippen Sie einmal auf Auswahl, um das Menü Ausschneiden / Kopieren zu öffnen

In den letzten beiden Fällen können Sie experimentieren, indem Sie ein Klickereignis für das inputElement auslösen

UPDATE: (07-10-2013)

  • iPod5 - iOS7.0.2 - Verwenden der Geige im Link: Eingegebener Text im Eingabefeld wird nicht angezeigt. Durch Drücken von Auswahl werde ich zu facebook.com (??? wtf ???) weitergeleitet. Keine Ahnung, was dort los ist.

UPDATE: (14-11-2013)

  • iOS 7.0.3: Dank des Kommentars von Binki Update, dass das .selectionStartund .selectionEnd funktioniert .

UPDATE: (15-01-2015)

  • iOS 8.xx: Dank des Kommentars von Michael Siebert . Aus dem Kommentar entnommen: Ich musste sowohl auf Fokus- als auch auf Klickereignisse warten und dann setTimeout / _. Debounce ausführen, damit es in beiden Fällen funktioniert: Klicken Sie auf die Eingabe oder den Fokus durch Tabulieren
Bart s
quelle
Du bist mein Held für heute! Klappt wunderbar! ;-)
andi1984
3
@ andi1984 wo beanspruche ich das Heldenabzeichen?
Bart s
1
Kennen Sie die Kompatibilität mit anderen iOS-Versionen? Funktioniert es unter iOS5 und iOS4?
andi1984
1
Funktioniert für mich unter iOS6, ABER a) funktioniert nicht auf dem Desktop Chrome b) funktioniert nicht, wenn die Texteingabe deaktiviert ist :( Mein Anwendungsfall: Ich generiere eine eindeutige URL und möchte das Teilen erleichtern.
Mars Robertson
1
@barts Ich gehe davon aus, dass Sie auf Facebook gelandet sind, weil das Menü "Teilen" bei jsfiddle durcheinander und tippbar sein muss, während es vielleicht unsichtbar ist. Beim Testen mit iOS-7.0.3 auf einem iPad habe ich selbst auf die unsichtbare Twitter-Schaltfläche geklickt. Ich fand auch heraus, dass <input/>das iPad , als ich dachte, ich tippe auf Ihr , auf das CSS-Fenster von jsfiddle tippte (in dem alles, was ich tippte, unsichtbar war). Sobald ich auf das Richtige <input/>getippt habe, funktioniert Ihre Schaltfläche "Text auswählen" unter iOS-7.0.3 einwandfrei :-).
Binki
7

Entschuldigung, in meinem früheren Beitrag habe ich das Javascript nicht bemerkt, was bedeutet, dass Sie eine Antwort in Javascript wollten.

Um das zu erreichen, was Sie in UIWebView mit Javascript wollen , habe ich es geschafft, zwei wichtige Informationen zusammen zu kratzen, damit es funktioniert. Ich bin mir nicht sicher über den mobilen Browser.

  1. element.setSelectionRange(0,9999); macht was wir wollen

  2. Das mouseUp-Ereignis macht die Auswahl rückgängig

Also (unter Verwendung des Prototyps):

    input.observe ('focus', function () {
      this.setSelectionRange (0, 9999);
    });
    input.observe ('mouseup', Funktion (Ereignis) {
      event.stop ();
    });

macht den Trick.

Matt

Matt
quelle
3
Wir haben das gleiche Problem und haben festgestellt, dass Ihre Lösung funktioniert - aber wir verwenden jquery (eigentlich mobil). / * wähle den Text in den Ausfüllungen aus * / $ ("Eingabe"). focus (function () {this.setSelectionRange (0, 9999); return false;}) .mouseup (function () {return false;} );
DuStorm
1
Ich verwende iOS 8 auf iPad und iPhone, und der Code von @DuStorm (Kommentar über diesem) ist das einzige, was bei allen hier gegebenen Antworten für mich funktioniert hat. Um es noch einmal zu wiederholen: Folgendes funktioniert mindestens unter iOS 8 in Chrome und Safari: $("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });
Aaron Jessen
Ich musste focusinanstelle von Fokus verwenden, damit dies funktioniert, iOS 7
Lucas
3

Es sieht so aus, als würde der Fokus funktionieren, aber nur, wenn er direkt von einem nativen Ereignis aufgerufen wird. Wenn Sie den Fokus mit SetTimeout aufrufen, wird die Tastatur nicht aufgerufen. Die Steuerung der iOS-Tastatur ist sehr schlecht. Es ist keine gute Situation.

yodaisgreen
quelle
1

In Webkit, das mit Android 2.2 geliefert wird, funktioniert für mich Folgendes:

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

Siehe Chromium- Ausgabe 32865 .

Robocat
quelle
1

Mit iOS 7 auf dem iPad war die einzige Möglichkeit, diese Arbeit zu machen, die Verwendung <textarea></textarea>anstelle von <input>Feld.

z.B

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

Es war schwieriger zu verhindern, dass der Benutzer den Text innerhalb des Bereichs ändert, da der Auswahltrick nicht mehr funktioniert, da Sie den Textbereich schreibgeschützt machen.

Mikael Lepistö
quelle
1

Ich war verrückt nach dieser Lösung, während all Ihre Antworten mir geholfen haben, eine weitere Dose Würmer für mich zu öffnen.

Der Client wollte, dass der Benutzer in der Lage ist , alle zu klicken und auszuwählen , und dass der Benutzer auf dem iPad (mit einer externen Tastatur. Ich weiß, verrückt ...) "Tab" und alle auswählen kann .

Meine Lösung für dieses Problem war, die Ereignisse neu zu ordnen. Erster Fokus , dann klicken , dann Berührungsstart .

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

Ich hoffe, das hilft jemandem, denn Sie haben mir unzählige Male geholfen.

adnan tariq
quelle
-4

Wenn Sie HTML5-kompatible Browser verwenden, können Sie diese placeholder="xxx"in Ihrem inputTag verwenden. Das sollte den Job machen.

DrMad
quelle
8
Ich glaube nicht, dass dies die Frage war
Caitriona