jquery input select all on focus

Question

Ich verwende diesen Code, um zu versuchen, den gesamten Text im Feld auszuwählen, wenn ein Benutzer den Fokus auf das Feld legt. Was passiert, ist, es wählt alle für eine Sekunde, dann seine unselected und der Eingabe-Cursor ist links, wo ich geklickt habe...

$("input[type=text]").focus(function() {
   $(this).select();
});

Ich möchte, dass alles ausgewählt bleibt.

Answer 1

Versuchen Sie es mit click 代わりに focus . Es scheint sowohl für Maus- als auch für Tastenereignisse zu funktionieren (zumindest auf Chrome/Mac):

jQuery < Version 1.7:

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery Version 1.7+:

$("input[type='text']").on("click", function () {
   $(this).select();
});

Hier ist eine Demo

Answer 2

Ich denke, dass dies der Fall ist:

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

Eine Abhilfe kann darin bestehen, select() asynchron aufzurufen, so dass es vollständig nach focus() ausgeführt wird:

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

Answer 3

Ich halte dies für die bessere Lösung. Im Gegensatz zur einfachen Auswahl im onclick-Ereignis, verhindert es nicht die Auswahl/Bearbeitung von Text mit der Maus. Es funktioniert mit den wichtigsten Rendering-Engines einschließlich IE8.

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

http://jsfiddle.net/25Mab/9/

Answer 4

Es gibt einige anständige Antworten hier und @user2072367 's ist mein Favorit, aber es hat ein unerwartetes Ergebnis, wenn Sie den Fokus über Tab statt über Klick. (Unerwartetes Ergebnis: Um Text normal auszuwählen, nachdem der Fokus per Tabulator gesetzt wurde, müssen Sie ein weiteres Mal klicken)

Diese Fiedel behebt diesen kleinen Fehler und speichert zusätzlich $(this) in einer Variablen, um eine redundante DOM-Auswahl zu vermeiden. Probieren Sie es aus! (:

Getestet im IE > 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

Answer 5

Nach sorgfältiger Prüfung schlage ich in diesem Thread diese Lösung als weitaus sauberer vor:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

Demo in jsFiddle

Das Problem:

Hier ist eine kleine Erklärung:

Schauen wir uns zunächst die Reihenfolge der Ereignisse an, wenn Sie mit der Maus oder der Tabulatortaste in ein Feld gehen.
Wir können alle relevanten Ereignisse wie folgt protokollieren:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

Hinweis : Ich habe diese Lösung geändert und verwende click statt mouseup da dies erst später in der Ereignis-Pipeline geschieht und laut @Jocie's Kommentar einige Probleme in Firefox zu verursachen schien

Einige Browser versuchen, den Cursor während der mouseup o click Veranstaltungen. Dies ist sinnvoll, da Sie die Einfügemarke möglicherweise an einer bestimmten Position beginnen und dann zur Hervorhebung eines Textes ziehen möchten. Das Programm kann die Position des Cursors erst bestimmen, wenn Sie die Maus tatsächlich anheben. Daher sind Funktionen, die focus sind dazu verdammt, zu früh zu reagieren, so dass der Browser Ihre Positionierung außer Kraft setzt.

Aber das Problem ist, dass wir das Fokus-Ereignis wirklich behandeln wollen. Es lässt uns wissen, wenn jemand das Feld zum ersten Mal betreten hat. Danach wollen wir das Auswahlverhalten des Benutzers nicht mehr außer Kraft setzen.

Die Lösung:

Stattdessen wird innerhalb der focus Ereignishandler können wir schnell Listener für die click (anklicken) und keyup (Tab in) Ereignisse, die kurz vor dem Auslösen stehen.

Hinweis : Das Keyup eines Tab-Ereignisses wird tatsächlich in das neue Eingabefeld feuern, nicht in das vorherige

Wir wollen das Ereignis nur einmal auslösen. Wir könnten verwenden .one("click keyup) aber dies würde den Event-Handler für jeden Ereignistyp einmal aufrufen . Stattdessen rufen wir unsere Funktion auf, sobald entweder mouseup oder keyup gedrückt wird. Das erste, was wir tun, ist die Handler für beide zu entfernen. Auf diese Weise ist es egal, ob wir mit der Tabulatortaste oder der Maus klicken. Die Funktion sollte genau einmal ausgeführt werden.

Hinweis : Die meisten Browser markieren natürlich den gesamten Text während eines Tab-Ereignisses, aber da animatedgif wies darauf hin wollen wir dennoch die keyup Ereignis, andernfalls das mouseup Das Ereignis wird immer noch in der Nähe sein, wenn wir uns angemeldet haben. Wir hören auf beides, damit wir die Zuhörer ausschalten können, sobald wir die Auswahl verarbeitet haben.

Jetzt können wir aufrufen select() nachdem der Browser seine Auswahl getroffen hat, so dass wir sicher sind, dass wir das Standardverhalten außer Kraft setzen.

Schließlich können wir für zusätzlichen Schutz Folgendes hinzufügen Ereignis-Namensräume zum mouseup y keyup Funktionen, so dass die .off() Methode entfernt keine anderen Hörer, die möglicherweise im Spiel sind.

---

Getestet in IE 10+, FF 28+, & Chrome 35+

---

Wenn Sie jQuery alternativ mit einer Funktion genannt once die für eine beliebige Anzahl von Ereignissen genau einmal ausgelöst wird :

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

Dann können Sie den Code wie folgt weiter vereinfachen:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

Demo in Fiedel