Was ist eine Vanilla JS- oder jQuery-Lösung, die den gesamten Inhalt eines Textfelds auswählt, wenn das Textfeld den Fokus erhält?
javascript
jquery
user-interface
Jon Erickson
quelle
quelle
Antworten:
quelle
quelle
onmouseup="return false;"
wenn der Benutzer den Text nach dem Fokussieren im Textfeld frei auswählen und bearbeiten kann . Mit diesem Code wird der Text in eine Situation "Alle auswählen" gesperrt und der Benutzer kann ihn nur bearbeiten, wenn der Benutzer einen neuen Text eingibt oder Pfeiltasten verwendet, um sich zu bewegen. Ehrlich gesagt fühlt sich das wie ein sehr seltsames Verhalten an und würde keinen Sinn ergeben, wenn das Textfeld nicht dauerhaft nicht bearbeitbar (und daher deaktiviert) sein soll.onmouseup="return false;"
wenn Sie einfach möchten, dass die Auswahl erfolgt, wenn der Benutzer zum ersten Mal klickt oder auf Registerkarten klickt. Und +1 für das Vanille-Javascript!quelle
quelle
mouseup
Ereignisses: "Sobald sich der Cursor im Feld befindet, funktioniert es nicht, irgendwo im ausgewählten Text zu klicken, um den Cursor dort zu positionieren. Klicks sind effektiv deaktiviert Situationen, in denen die Auswahl des gesamten Textes im Fokus wünschenswert ist, ist wahrscheinlich das kleinere von zwei Übeln. "jQuery ist kein JavaScript, das in einigen Fällen einfacher zu verwenden ist.
Schauen Sie sich dieses Beispiel an:
Quelle: CSS Tricks , MDN
quelle
Dies ist nicht nur ein Chrome / Safari-Problem, ich habe auch ein ziemlich ähnliches Verhalten mit Firefox 18.0.1 festgestellt. Der lustige Teil ist, dass dies auf MSIE nicht passiert! Das Problem hierbei ist das erste Mouseup- Ereignis, bei dem die Auswahl des Eingabeinhalts aufgehoben werden muss. Ignorieren Sie also einfach das erste Vorkommen.
Der timeOut-Ansatz verursacht ein seltsames Verhalten. Wenn Sie jedes Mouseup-Ereignis blockieren, können Sie die Auswahl nicht entfernen, indem Sie erneut auf das Eingabeelement klicken.
quelle
HTML:
Verwenden von JS:
Verwenden von JQuery:
Verwenden von React JS:
In der jeweiligen Komponente innerhalb der Renderfunktion -
quelle
onFocus={(e) => e.target.select()}
Meine Lösung besteht darin, eine Zeitüberschreitung zu verwenden. Scheint in Ordnung zu funktionieren
quelle
Dies funktioniert auch unter iOS:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
quelle
Ich weiß, dass Inline-Code ein schlechter Stil ist, aber ich wollte ihn nicht in eine .js-Datei einfügen. Funktioniert ohne jQuery!
quelle
Die Antworten hier haben mir bis zu einem gewissen Punkt geholfen, aber ich hatte ein Problem mit den Eingabefeldern für HTML5-Nummern, als ich in Chrome auf die Auf- / Ab-Schaltflächen geklickt habe.
Wenn Sie auf eine der Schaltflächen klicken und die Maus über der Schaltfläche lassen, ändert sich die Nummer ständig, als ob Sie die Maustaste gedrückt halten würden, weil das Mouseup weggeworfen wurde.
Ich habe dieses Problem gelöst, indem ich den Mouseup-Handler entfernt habe, sobald er wie folgt ausgelöst wurde:
Hoffe das hilft den Menschen in der Zukunft ...
quelle
mouseup
den Text Eingabefelder nur und nichtnumber
s. Dieses Problem sollte daher nicht kommenDies wird funktionieren, versuchen Sie dies -
Funktioniert in Safari / IE 9 und Chrome, ich hatte jedoch keine Gelegenheit, in Firefox zu testen.
quelle
Ich weiß, dass es hier bereits viele Antworten gibt - aber diese fehlt bisher; Eine Lösung, die auch mit von Ajax generierten Inhalten funktioniert:
quelle
Ich konnte Zachs Antwort durch einige Funktionsaufrufe leicht verbessern. Das Problem mit dieser Antwort ist, dass onMouseUp vollständig deaktiviert wird, wodurch Sie daran gehindert werden, im Textfeld herumzuklicken, sobald es den Fokus hat.
Hier ist mein Code:
Dies ist eine leichte Verbesserung gegenüber Zachs Antwort. Es funktioniert perfekt im IE, überhaupt nicht in Chrome und funktioniert abwechselnd mit Erfolg in FireFox (buchstäblich jedes Mal). Wenn jemand eine Idee hat, wie es in FF oder Chrome zuverlässig funktioniert, teilen Sie dies bitte mit.
Wie auch immer, ich dachte, ich würde teilen, was ich könnte, um das ein bisschen schöner zu machen.
quelle
onMouseUp=""
undonMouseDown=""
nicht der richtige w3-Standard sind. Sie solltenonmouseup=""
und seinonmousedown=""
. Wie bei anderen HTML-Attributen sollten sie in Kleinbuchstaben und nicht in Kamelbuchstaben geschrieben werden.Wie bei @Travis und @Mari wollte ich automatisch auswählen, wenn der Benutzer darauf klickt, was bedeutet, dass das Standardverhalten von a verhindert wird
mouseup
Ereignisses verhindert wird, der Benutzer jedoch nicht daran . Die von mir entwickelte Lösung, die in IE11, Chrome 45, Opera 32 und Firefox 29 funktioniert (dies sind die Browser, die ich derzeit installiert habe), basiert auf der Abfolge der Ereignisse, die mit einem Mausklick verbunden sind.Wenn Sie auf eine Texteingabe klicken, die keinen Fokus hat, werden (unter anderem) folgende Ereignisse angezeigt:
mousedown
: Als Antwort auf Ihren Klick. Die Standardbehandlung wirdfocus
bei Bedarf erhöht und der Auswahlstart festgelegt.focus
: Im Rahmen der Standardbehandlung vonmousedown
.mouseup
: Der Abschluss Ihres Klicks, dessen Standardbehandlung das Auswahlende festlegt.Wenn Sie auf eine Texteingabe klicken, die bereits den Fokus hat, wird das
focus
Ereignis übersprungen. Wie @Travis und @Mari beide scharfsinnig bemerkten, muss die Standardbehandlung vonmouseup
nur verhindert werden, wenn dasfocus
Ereignis eintritt. Da es jedoch kein "focus
nicht aufgetretenes" Ereignis gibt, müssen wir darauf schließen, was wir immousedown
Handler tun können .@ Maris Lösung erfordert den Import von jQuery, was ich vermeiden möchte. Die Lösung von @ Travis führt dies durch Inspektion durch
document.activeElement
. Ich weiß nicht, warum genau seine Lösung nicht in allen Browsern funktioniert, aber es gibt eine andere Möglichkeit zu verfolgen, ob die Texteingabe den Fokus hat: Folgen Sie einfach demfocus
undblur
Ereignissen.Hier ist der Code, der für mich funktioniert:
Ich hoffe, das hilft jemandem. :-)
quelle
quelle
Sie müssen nur das folgende Attribut hinzufügen:
Zum Beispiel:
(Ehrlich gesagt habe ich keine Ahnung, warum Sie etwas anderes brauchen würden.)
quelle
Dies hat bei mir funktioniert (Posting, da es nicht in Antworten, sondern in einem Kommentar steht)
quelle
Bearbeiten: Auf Anfrage von @ DavidG kann ich keine Details angeben, da ich nicht sicher bin, warum dies funktioniert, aber ich glaube, dass dies etwas damit zu tun hat, dass sich das Fokusereignis nach oben oder unten ausbreitet oder was auch immer es tut und das Eingabeelement die Benachrichtigung erhält es hat Fokus erhalten. Durch Festlegen des Zeitlimits erhält das Element einen Moment Zeit, um zu erkennen, dass dies geschehen ist.
quelle
Wenn Sie die Ereignisse miteinander verketten, entfällt meines Erachtens die Verwendung,
.one
wie an anderer Stelle in diesem Thread vorgeschlagen.Beispiel:
quelle
Hinweis: Wenn Sie in ASP.NET programmieren, können Sie das Skript mit ScriptManager.RegisterStartupScript in C # ausführen:
Oder geben Sie das Skript einfach in die HTML-Seite ein, die in den anderen Antworten vorgeschlagen wurde.
quelle
Ich säe dieses irgendwo, arbeite perfekt!
quelle
Ich bin etwas spät zur Party, aber das funktioniert perfekt in IE11, Chrome, Firefox, ohne Mouseup (und ohne JQuery) durcheinander zu bringen.
quelle
focus
ins Feld tippen, werden Sie mehrere Mouseup-Ereignis-Listener finden, die anhängen ...Meine Lösung ist die nächste:
Mouseup funktioniert also normalerweise, wird jedoch nicht abgewählt, nachdem der Fokus durch Eingabe erhalten wurde
quelle