Auswahl aller Inhalte eines Textfeldes, wenn es den Fokus erhält (Vanilla JS oder jQuery)

Question

Was ist eine Vanilla JS oder jQuery-Lösung, die alle Inhalte eines Textfeldes auswählen wird, wenn das Textfeld Fokus erhält?

Answer 1

Ich weiß, dass es hier schon viele Antworten gibt - aber diese eine fehlt bisher; eine Lösung, die auch mit ajax-generierten Inhalten funktioniert:

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

Answer 2

Wie @Travis und @Mari wollte ich eine automatische Auswahl treffen, wenn der Benutzer auf die Schaltfläche klickt, was bedeutet, dass das Standardverhalten einer mouseup Ereignis, aber nicht verhindern, dass der Benutzer herumklicken kann. Die Lösung, die ich mir ausgedacht habe und die in IE11, Chrome 45, Opera 32 und Firefox 29 funktioniert (das sind die Browser, die ich derzeit installiert habe), basiert auf der Abfolge der Ereignisse bei einem Mausklick.

Wenn Sie auf eine Texteingabe klicken, die nicht fokussiert ist, erhalten Sie (unter anderem) diese Ereignisse:

• mousedown : Als Antwort auf Ihren Klick. Die Standard-Behandlung wirft focus falls erforderlich und setzt die Auswahl auf Start.
• focus : Als Teil der Standardbehandlung von mousedown .
• mouseup : Der Abschluss Ihres Klicks, dessen Standardbehandlung das Ende der Auswahl festlegt.

Wenn Sie auf eine Texteingabe klicken, die bereits den Fokus hat, wird die focus Ereignis übersprungen wird. Wie @Travis und @Mari scharfsinnig bemerkten, ist die Standardbehandlung von mouseup muss nur verhindert werden, wenn die focus Ereignis eintritt. Da es jedoch kein " focus nicht stattgefunden hat", müssen wir dies ableiten, was wir innerhalb der mousedown Handler.

Die Lösung von @Mari erfordert, dass jQuery importiert wird, was ich vermeiden möchte. Bei der Lösung von @Travis wird dies durch die Inspektion von document.activeElement . Ich weiß nicht, warum seine Lösung nicht in allen Browsern funktioniert, aber es gibt einen anderen Weg, um festzustellen, ob die Texteingabe den Fokus hat: Folgen Sie einfach seiner focus y blur Veranstaltungen.

Hier ist der Code, der bei mir 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 weiter :-)

Answer 3

Das wird funktionieren, probieren Sie es aus -

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

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

Answer 4

Die Antworten hier haben mir bis zu einem gewissen Punkt geholfen, aber ich hatte ein Problem mit HTML5-Zahleingabefeldern, wenn ich auf die Auf-/Ab-Schaltflächen in Chrome klickte.

Wenn Sie auf eine der Schaltflächen klicken und die Maus über der Schaltfläche belassen, ändert sich die Zahl ständig, als ob Sie die Maustaste gedrückt hielten, weil die Mausbewegung weggeworfen wurde.

Ich habe dies gelöst, indem ich den Mouseup-Handler entfernt habe, sobald er wie unten beschrieben ausgelöst wurde:

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

Ich hoffe, das hilft den Leuten in Zukunft...

Answer 5

Was ist eine JavaScript- oder jQuery-Lösung, die select den gesamten Inhalt eines Textfeldes, wenn das Textfeld Fokus ?

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, wozu man sonst noch etwas braucht.)