Wählen Sie alle Inhalte des Textfelds aus, wenn es den Fokus erhält (Vanilla JS oder jQuery).

311

Was ist eine Vanilla JS- oder jQuery-Lösung, die den gesamten Inhalt eines Textfelds auswählt, wenn das Textfeld den Fokus erhält?

Jon Erickson
quelle
3
@gdoron aus irgendeinem Grund, der Link leitet zu dieser Frage selbst weiter.
Destrictor
@Destrictor, Ja, es sollte folgendes gewesen sein: "Auswählen von Text auf Fokus mit jQuery, der in Safari und Chrome nicht funktioniert"
gdoron unterstützt Monica
Das Problem bei den meisten dieser Lösungen ist, dass sie beim Ändern der Cursorposition innerhalb des Eingabefelds nicht richtig funktionieren. Schauen Sie sich meine Antwort hier an: stackoverflow.com/a/20826207/641452
Colin Breame

Antworten:

370
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
John Sheehan
quelle
23
Auch nur für zusätzliche Infos: "input [type = text]" kann jetzt "input: text" sein
Ricardo Vega
8
Dies scheint für mich in Chrome nicht zu funktionieren, und die jQuery-Website gibt an, dass es vom Browser abhängig ist. Kann jemand anderes überprüfen?
Kenny Wyland
71
Es sieht so aus, als würden WebKit-Browser dies aufgrund des Mouseup-Ereignisses stören. Ich habe dies hinzugefügt und es hat funktioniert: $ ('input: text'). Mouseup (Funktion (e) {return false;});
Kenny Wyland
5
Kenny ist korrekt, aber leider wirkt sich 'mouseup' auch auf die Chrome-Spinner-Steuerelemente aus. Das Auslösen von "Klicken" anstelle von "Fokussieren" scheint das zu lösen
Richard Kennard
24
Ich benutze so: $ ("input: text"). Select (). Focus ();
Phuong
227

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

Zach
quelle
43
+ onmouseup = "return false", um die Auswahl beim Klicken aufzuheben
Anthony Johnston
2
+1 für eine Art StopEvent für Mouseup, oder dies funktioniert nicht zuverlässig. Der Nachteil dabei ist, dass das Klicken auf eine Stelle im ausgewählten Text, um den Cursor dort zu positionieren, nicht funktioniert, sobald sich der Cursor im Feld befindet. Klicks sind effektiv deaktiviert. In Situationen, in denen die Auswahl des gesamten Textes im Fokus wünschenswert ist, ist dies wahrscheinlich das geringere von zwei Übeln.
Enigment
Ich konnte das durch Enigment aufgeworfene Problem etwas umgehen, indem ich während des onMouseDown-Ereignisses eine globale Variable doMouseUp auf false setzte, wenn this! = Document.activeElement. Setzen Sie dann während onMouseUp doMouseUp auf true zurück und geben Sie den doMouseUp-Wert zurück, bevor Sie ihn zurücksetzen. Dies wird immer komplizierter und benötigt Code - ich werde eine Antwort veröffentlichen, die es besser erklärt.
Travis
1
Fügen Sie NICHT hinzu, 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.
ADTC
1
Technisch gesehen brauchen Sie das nicht, 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!
Clabe45
42
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
Tomas Kirda
quelle
3
Bestätigt. Die aktuell am höchsten bewertete / akzeptierte Antwort scheint für Chrome nicht zu funktionieren.
Aron Boyette
39
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
Yogesh Agrawal
quelle
1
Das ist gut. Vielen Dank! Der Kommentar durch die Aktivierung von Zachs Antwort hat einen Nachteil bei der Verhinderung der Standardeinstellung des mouseupEreignisses: "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. "
JohnK
25

jQuery ist kein JavaScript, das in einigen Fällen einfacher zu verwenden ist.

Schauen Sie sich dieses Beispiel an:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Quelle: CSS Tricks , MDN

aaa
quelle
7
Vielleicht ist das in Ordnung, wenn es Ihnen nichts ausmacht, Markup und Code durcheinander zu bringen. Die meisten Leute versuchen heutzutage, ihr Skript "unauffällig" zu halten. Oh ... und jQuery ist Javascript.
Andrew Barber
2
Vielen Dank für den Vorschlag von onclick, funktioniert super. Nicht jeder nutzt jQuery und freut sich über eine weitere Option.
Lukus
Dies setzt voraus, dass Benutzer nur die Maus verwenden
pcnate
kann onfocus = "this.focus (); this.select ()" für die Tastatur verwenden
Muhammad Nadeem
21

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.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

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.

Cizar
quelle
1
+1 für die Verwendung von eins, um ein einzelnes Mouseup zu verhindern. Ich mochte es wirklich nicht, nach dem ersten Klick keinen Text mit der Maus auswählen zu können.
Pluc
13

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Verwenden von JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Verwenden von JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Verwenden von React JS:

In der jeweiligen Komponente innerhalb der Renderfunktion -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>
Aniruddha Shevle
quelle
2
Dies funktioniert für mich in React:onFocus={(e) => e.target.select()}
Paito
11

Meine Lösung besteht darin, eine Zeitüberschreitung zu verwenden. Scheint in Ordnung zu funktionieren

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});
Jamie Pate
quelle
Dies ist die Lösung, die ich benutze und bevorzuge. Ich verwende einen Timeout-Wert von 0, da dieser am Ende der aktuellen Ereigniswarteschlange hinzugefügt wird, was bedeutet, dass er nach dem "mouseup" -Ereignis ausgeführt wird.
DavidM
4

Ich weiß, dass Inline-Code ein schlechter Stil ist, aber ich wollte ihn nicht in eine .js-Datei einfügen. Funktioniert ohne jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>
user3296743
quelle
3

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:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Hoffe das hilft den Menschen in der Zukunft ...

H2Os
quelle
Nein, nein. Sie geben eine Lösung für ein selbst generiertes Problem. Wenn Sie richtig auf die Antwort suchen, sind verbindlich sie mouseupden Text Eingabefelder nur und nicht numbers. Dieses Problem sollte daher nicht kommen
Om Shankar
Das Problem beim Binden von mouseup besteht darin, dass es beim Bewegen des Cursors innerhalb des Feldes stört. Dies ist eine bessere Lösung. Wenn Sie jedoch in das Feld blättern, geht die nächste Maus verloren (und der Benutzer kann den Cursor nicht mit der Maus bewegen). Das ist besser als alle Mousedowns zu verlieren!
Colin Breame
3

Dies wird funktionieren, versuchen Sie dies -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Funktioniert in Safari / IE 9 und Chrome, ich hatte jedoch keine Gelegenheit, in Firefox zu testen.

Adithya Kumaranchath
quelle
3

Ich weiß, dass es hier bereits viele Antworten gibt - aber diese fehlt bisher; Eine Lösung, die auch mit von Ajax generierten Inhalten funktioniert:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});
low_rents
quelle
2

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:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

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.

Travis
quelle
In Ihrem Code ist ein Fehler aufgetreten. Die zweite Methode sollte "TextBoxMouseUp" heißen. Schauen Sie sich meine Antwort an, die einen ähnlichen Ansatz verwendet.
Colin Breame
1
Es ist zu beachten, dass onMouseUp=""und onMouseDown=""nicht der richtige w3-Standard sind. Sie sollten onmouseup=""und sein onmousedown="". Wie bei anderen HTML-Attributen sollten sie in Kleinbuchstaben und nicht in Kamelbuchstaben geschrieben werden.
DrewT
2

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 wird focusbei Bedarf erhöht und der Auswahlstart festgelegt.
  • focus: Im Rahmen der Standardbehandlung von mousedown.
  • mouseup: Der Abschluss Ihres Klicks, dessen Standardbehandlung das Auswahlende festlegt.

Wenn Sie auf eine Texteingabe klicken, die bereits den Fokus hat, wird das focusEreignis übersprungen. Wie @Travis und @Mari beide scharfsinnig bemerkten, muss die Standardbehandlung von mouseupnur verhindert werden, wenn das focusEreignis eintritt. Da es jedoch kein " focusnicht aufgetretenes" Ereignis gibt, müssen wir darauf schließen, was wir im mousedownHandler 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 dem focusundblur Ereignissen.

Hier ist der Code, der für mich funktioniert:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Ich hoffe, das hilft jemandem. :-)

Jonathan Gilbert
quelle
+1 Danke, aber wie kann dies neu geschrieben werden, damit Sie das Steuerelement 'txtCustomer' nicht fest in das Skript codieren? Gibt es eine Möglichkeit, ein "dieses" Objekt weiterzugeben?
Fandango68
Eine Möglichkeit wäre, eine Dienstprogrammfunktion zu erstellen, um das Verhalten auf jedes Element anzuwenden, das als Parameter übergeben wird. Innerhalb dieser Funktion wäre die Elementreferenz fest codiert - auf den Parameter. Sie können es dann für eine beliebige Anzahl von Eingabeelementen aufrufen, die mit den Ihnen zur Verfügung stehenden Mitteln identifiziert werden. :-)
Jonathan Gilbert
Entschuldigung, ich bin ein Noob. Könnten Sie bitte Ihre Antwort mit einem Beispiel aktualisieren? Vielen Dank
Fandango68
1
Schließen Sie einfach den Code, den ich geschrieben habe, in eine Funktionsdeklaration ein, die einen Parameter namens "txtCustomer" verwendet. Ich empfehle, "txtCustomer" in etwas anderes umzubenennen, aber wenn Sie sich nicht sicher sind, funktioniert dies technisch mit der Variablen "txtCustomer". Das heißt: Funktion MakeTextBoxAutoSelect (txtCustomer) { was ich oben geschrieben habe }
Jonathan Gilbert
1
onclick="this.focus();this.select()"
Sourabh
quelle
1

Was ist eine JavaScript- oder jQuery-Lösung, die den gesamten Inhalt eines Textfelds auswählt, wenn das Textfeld den Fokus erhält ?

Sie müssen nur das folgende Attribut hinzufügen:

onfocus="this.select()"

Zum Beispiel:

<input type="text" value="sometext" onfocus="this.select()">

(Ehrlich gesagt habe ich keine Ahnung, warum Sie etwas anderes brauchen würden.)

ADTC
quelle
1

Dies hat bei mir funktioniert (Posting, da es nicht in Antworten, sondern in einem Kommentar steht)

 $("#textBox").focus().select();
Vijay Vepakomma
quelle
0
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

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.

Michael Tranchida
quelle
Bitte erläutern Sie Ihre Antwort, anstatt nur einen Code einzufügen.
DavidG
0

Wenn Sie die Ereignisse miteinander verketten, entfällt meines Erachtens die Verwendung, .onewie an anderer Stelle in diesem Thread vorgeschlagen.

Beispiel:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});
DrewT
quelle
0

Hinweis: Wenn Sie in ASP.NET programmieren, können Sie das Skript mit ScriptManager.RegisterStartupScript in C # ausführen:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Oder geben Sie das Skript einfach in die HTML-Seite ein, die in den anderen Antworten vorgeschlagen wurde.

Exel Gamboa
quelle
Die Frage hat nirgendwo ASP.NET. : |
Mohamed Thaufeeq
Richtig, ich habe dies nur für den Fall gepostet, dass der Programmierer ASP.NET verwendet. Es kann hilfreich sein für jemanden, der mithilfe des Frameworks nach einer Antwort sucht (da dies mir geholfen hat). Ich teile nur und hoffentlich findet es jemand hilfreich.
Exel Gamboa
Nur für den Fall, dass der Programmierer ASP.NET verwendet, fügt er der Frage das Tag 'asp.net' hinzu. : |
Mohamed Thaufeeq
0

Ich säe dieses irgendwo, arbeite perfekt!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });
Yaniv
quelle
0

Ich bin etwas spät zur Party, aber das funktioniert perfekt in IE11, Chrome, Firefox, ohne Mouseup (und ohne JQuery) durcheinander zu bringen.

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});
Guillaume B.
quelle
Ja, aber wenn Sie focusins Feld tippen, werden Sie mehrere Mouseup-Ereignis-Listener finden, die anhängen ...
Sebastian Scholle
-1

Meine Lösung ist die nächste:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Mouseup funktioniert also normalerweise, wird jedoch nicht abgewählt, nachdem der Fokus durch Eingabe erhalten wurde

Mari
quelle