Auswählen des gesamten Textes in der HTML-Texteingabe, wenn darauf geklickt wird
Lesezeit: 7 Minuten
Fragen
Ich habe den folgenden Code, um ein Textfeld in einer HTML-Webseite anzuzeigen.
<input type="text" id="userid" name="userid" value="Please enter the user ID" />
Wenn die Seite angezeigt wird, enthält der Text die Bitte geben Sie die Benutzer-ID ein Botschaft. Ich habe jedoch festgestellt, dass der Benutzer dreimal klicken muss, um den gesamten Text auszuwählen (in diesem Fall ist es Bitte geben Sie die Benutzer-ID ein).
Ist es möglich, den gesamten Text mit nur einem Klick auszuwählen?
Bearbeiten:
Entschuldigung, ich habe vergessen zu sagen: Ich muss die Eingabe verwenden type="text"
Ein besserer Ansatz ist die Verwendung von a <label> für das Etikett und nicht die value. Sie können JS und CSS verwenden, um es gleich aussehen zu lassen, ohne so antisemantisch zu sein. dorward.me.uk/tmp/label-work/example.html hat ein Beispiel mit jQuery.
– QUentin
1. November 10 um 8:34 Uhr
Oder verwenden Sie sogar einen Platzhalter, wenn Sie in einem modernen HTML5-Projekt arbeiten.
Um das allgemeiner zu machen, könnten Sie verwenden this.id als Argument für den Click-Handler. Besser noch, du könntest das beseitigen getElementById ganz und passieren this als Argument.
– Asad Saeeduddin.
14. Dezember 12 um 23:05
Auf mobilem Safari funktioniert das nicht. Versuchen Sie stattdessen, this.setSelectionRange(0, 9999) aufzurufen.
– Dean Radcliffe.
2. Dezember 13 um 4:44 Uhr
@DeanRadcliffe Schön! Ich würde verwenden this.setSelectionRange(0, this.value.length) stattdessen.
In Chrome bleibt die Auswahl über .select() nicht erhalten – das Hinzufügen eines leichten Timeouts behebt dieses Problem.
Es ist unmöglich, den Cursor nach dem Fokussieren an einem gewünschten Punkt zu platzieren.
Hier ist eine vollständige Lösung, die den gesamten Text in Fokus auswählt, kann jedoch nach dem Fokus einen bestimmten Cursorpunkt auswählen.
$(function () {
var focusedElement;
$(document).on('focus', 'input', function () {
if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
focusedElement = this;
setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
});
});
Fügen Sie hinzu, um den Fall zu handhaben, in dem der Benutzer vom Feld weg und dann wieder zurück klickt .on('blur', 'input', function(){focusedElement = null;})
– Tamlyn.
25. Februar ’14 um 14:12 Uhr
eine Zeitüberschreitung von 0 funktioniert bei mir in chrome und firefox. Ich bin mir nicht sicher, wo Ihre Zeitüberschreitung liegt 50 kommt aus.
– thejoshwolfe
4. August um 2:12 Uhr
Die Lösung besteht darin, onClick anstelle von onFocus zu verwenden. Funktioniert einwandfrei und benötigt keine komplizierten Codes.
– Ismael.
8. August um 23:49 Uhr
@CoryHouse spielt keine Rolle, weil Focus via Tab nativ den Text auswählt! Kein Javascript erforderlich.
– Ismael.
11. August um 14:40 Uhr
@CoryHouse auch nach 4 Jahren funktionieren Ihre Codes wie ein Zauber. Mann, nimm einen Bogen. Danke für diesen kleinen schmutzigen Hack. Ich habe 2-3 Tage gesucht, bis ich diesen gefunden habe. :+1:
– Rutvij Kothari.
6. Dezember 17 um 7:36 Uhr
Olinkwebdevelopment.
Html (Sie müssen das onclick-Attribut auf jede Eingabe setzen, für die es auf der Seite funktionieren soll)
<input type="text" value="click the input to select" onclick="this.select();"/>
Oder eine bessere Option
jQuery (dies funktioniert für jede Texteingabe auf der Seite, Sie müssen Ihr HTML nicht ändern):
Es wäre wahrscheinlich besser, an das Fokus-Ereignis zu binden, anstatt für diejenigen, die durch die Formularelemente taschen.
– Andrew Ensley
10. Dezember 12 um 15:29
@Andrew Das ist nicht notwendig, da der Text immer ausgewählt ist, wenn Sie durch Eingabeelemente navigieren. 😉
– Nietonfir.
28. Oktober ’13 um 15:40
Focus-Events sind fehlerhaft, das Blur-Event hingegen ist praktisch, um die Validierung und das automatische Speichern von Formularen auszulösen, funktioniert auch, wenn Sie mit der Tabulatortaste durchgehen!
– oLinkWebEntwicklung
8. März ’14 um 20:05 Uhr
Sollte gut funktionieren, stellen Sie sicher, dass Sie eine aktualisierte Version von jQuery verwenden, oder verwenden Sie $ (Dokument) .live () zu älteren Versionen.
– Olinkwebdevelopment.
8. August 14 um 18:11 Uhr
Es sei denn, der Benutzer hat bereits JQuery eine bessere Option mit der Hinzufügung einer Abhängigkeit von einer Drittanbieter-Bibliothek.
– Ross.
13. Januar 16 um 1:27 Uhr
Ich weiß, dass dies alt ist, aber die beste Option ist, jetzt die neue zu verwenden placeholder HTML-Attribut wenn möglich:
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
Dadurch wird der Text angezeigt, es sei denn, es wird ein Wert eingegeben, wodurch die Notwendigkeit entfällt, Text auszuwählen oder Eingaben zu löschen.
Wählt den gesamten Text im aktuell fokussierten Element aus.
Aktualisierung 2021: execCommand ist jetzt veraltet.
Es ist wahrscheinlich das Beste, um ehrlich zu sein, da es sich um eine alte IE-API handelte, die von den anderen Browsern übernommen wurde, und es war immer etwas seltsam, damit zu arbeiten. Trotzdem war es schön, eine Lösung zu haben, mit der beide funktionierten <input> Felder und contenteditable Elemente.
.select() ist wahrscheinlich der beste Weg zu gehen <input> Felder heutzutage.
Für contenteditableDie moderne Lösung besteht darin, die Reichweite-API zu verwenden.
Das scheint eine elegante Lösung zu sein. Der vollständige Code würde wie folgt aussehen: <input type="text" onclick="document.execCommand('selectall',null,false);" />
– Pfeifer
26. Dezember 16 um 10:07 Uhr
Ja, es ist mein Lieblingsweg, um diese Art von Aufgabe zu tun, insb. wie es funktioniert contenteditable Elemente ebenso. Ich denke, man kann es auch noch etwas eleganter machen, dh <input type="text" onfocus="document.execCommand('selectall')"> – Ziemlich sicher, dass Sie die entfernen können null und false Wenn Sie sie nicht benutzen.
– toastrackenigma.
28. Dezember 16 um 3:16 Uhr
beim Benutzen onfocusDie gesamte Seite wird ausgewählt, wenn in Chrome eingegeben wird. onclick funktioniert gut.
@arcanemachine Prost, danke, dass du mich informiert hast. Ich habe dem Beitrag einen Hinweis hinzugefügt 🙂
– Toasttrackenigma
8. Juni 21 um 4:06 Uhr
Notiz: Wenn Sie überlegen onclick="this.select()", Beim ersten Klick werden alle Zeichen ausgewählt, danach wollten Sie danach etwas in der Eingabe bearbeiten, und klicken Sie erneut auf die Zeichen in Zeichen, aber es wählt alle Zeichen erneut aus. Um dieses Problem zu beheben, sollten Sie verwenden onfocus anstatt onclick.
Das scheint eine elegante Lösung zu sein. Der vollständige Code würde wie folgt aussehen: <input type="text" onclick="document.execCommand('selectall',null,false);" />
– Pfeifer
26. Dezember 16 um 10:07 Uhr
Ja, es ist mein Lieblingsweg, um diese Art von Aufgabe zu tun, insb. wie es funktioniert contenteditable Elemente ebenso. Ich denke, man kann es auch noch etwas eleganter machen, dh <input type="text" onfocus="document.execCommand('selectall')"> – Ziemlich sicher, dass Sie die entfernen können null und false Wenn Sie sie nicht benutzen.
– Toasttrackenigma
28. Dezember 16 um 3:16 Uhr
beim Benutzen onfocusDie gesamte Seite wird ausgewählt, wenn in Chrome eingegeben wird. onclick funktioniert gut.
Ein besserer Ansatz ist die Verwendung von a
<label>für das Etikett und nicht dievalue. Sie können JS und CSS verwenden, um es gleich aussehen zu lassen, ohne so antisemantisch zu sein. dorward.me.uk/tmp/label-work/example.html hat ein Beispiel mit jQuery.– QUentin
1. November 10 um 8:34 Uhr
Oder verwenden Sie sogar einen Platzhalter, wenn Sie in einem modernen HTML5-Projekt arbeiten.
– léo lam.
26. Oktober ’14 um 11:17
placeholder=”Bitte geben Sie die Benutzer-ID ein”
– Marcelo-Bonus
15. August ’19 um 19:14 Uhr