jquery-Eingabe Alle Fokus auswählen

Ich denke, was passiert, ist folgendes:

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

Eine Problemumgehung kann das select () asynchron aufrufen, 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);
});

Ich denke, das ist eine bessere Lösung. Im Gegensatz zum einfachen Auswählen in einem Onclick-Ereignis wird das Auswählen/Bearbeiten von Text mit der Maus nicht verhindert. Es funktioniert mit großen Rendering-Engines einschließlich IE8.

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

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

Es gibt einige anständige Antworten hier und @ user2072367 ist mein Favorit, aber es hat ein unerwartetes Ergebnis, wenn Sie über Tab statt über Klick fokussieren. (unerwartetes Ergebnis: Um Text normalerweise nach dem Scharfstellen über die Registerkarte auszuwählen, müssen Sie noch einmal klicken.)

Diese Geige behebt diesen kleinen Fehler und speichert zusätzlich $ (this) in einer Variablen, um eine redundante DOM-Auswahl zu vermeiden. Hör zu! (:

Getestet in 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();
});

Nach sorgfältiger Prüfung schlage ich diese Lösung als weitaus sauberer in diesem Thread 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 einem Tab in ein Feld klicken.
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, um click anstelle von mouseup zu verwenden, wie es später in der Ereignis-Pipeline geschieht und schien laut @ Jocies Kommentar einige Probleme in Firefox zu verursachen

Einige Browser versuchen, den Cursor während der Ereignisse mouseup oder click zu positionieren. Dies ist sinnvoll, da Sie das Caret möglicherweise an einer Position starten und ziehen möchten, um Text hervorzuheben. Die Position des Einfügemarke kann erst angegeben werden, wenn Sie die Maus tatsächlich angehoben haben. Funktionen, die focus verarbeiten, reagieren zu früh, sodass der Browser Ihre Position überschreiben kann.

Aber das Problem ist, dass wir wirklich mit dem Fokusereignis umgehen wollen. Es teilt uns das erste Mal mit, dass jemand das Feld betreten hat. Danach möchten wir das Benutzerauswahlverhalten nicht mehr außer Kraft setzen.

Die Lösung:

Stattdessen können wir im focus -Ereignishandler schnell Listener für die Ereignisse click (Klicken) und keyup (Registerkarten) anhängen, die ausgelöst werden sollen.

Hinweis : Das Keyup eines Tab-Ereignisses wird tatsächlich im neuen Eingabefeld ausgelöst, nicht im vorherigen . )

Wir wollen das Event nur einmal auslösen. Wir könnten .one("click keyup) verwenden, aber dies würde den Ereignishandler einmal für jeden Ereignistyp aufrufen. Stattdessen rufen wir unsere Funktion auf, sobald entweder mouseup oder keyup gedrückt wird. Das erste, was wir tun werden, ist, die Handler für beide zu entfernen. Auf diese Weise spielt es keine Rolle, ob wir einen Tabulator oder einen Mausklick ausführen. Die Funktion sollte genau einmal ausgeführt werden.

Hinweis : Die meisten Browser wählen natürlich den gesamten Text während eines Tab-Ereignisses aus, aber als animiertes GIF wiesen wir darauf hin Ich möchte das keyup -Ereignis immer noch behandeln, andernfalls bleibt das mouseup -Ereignis immer noch bestehen, wenn wir uns umgesehen haben. habe die auswahl bearbeitet.

Jetzt können wir select() aufrufen, nachdem der Browser seine Auswahl getroffen hat, damit wir das Standardverhalten überschreiben.

Zum zusätzlichen Schutz können wir den mouseup und Ereignis-Namespaces hinzufügen keyup funktioniert so, dass die Methode .off() keine anderen Listener entfernt, die möglicherweise im Spiel sind.

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

Wenn Sie jQuery alternativ mit einer Funktion namens once erweitern möchten, die genau einmal für eine beliebige Anzahl von Ereignissen 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 Geige

Dies würde die Arbeit erledigen und das Problem vermeiden, dass Sie einen Teil des Textes nicht mehr mit der Maus auswählen können.

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

Diese Version funktioniert unter IOS und behebt das Standard-Drag-to-Select unter Windows Chrome

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

Das Problem bei den meisten dieser Lösungen ist, dass sie nicht korrekt funktionieren, wenn die Cursorposition innerhalb des Eingabefelds geändert wird.

Das onmouseup-Ereignis ändert die Cursorposition innerhalb des Felds, das nach onfocus (mindestens in Chrome und FF) ausgelöst wird. Wenn Sie mouseup unbedingt löschen, kann der Benutzer die Cursorposition nicht mit der Maus ändern.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

Der Code verhindert das Standardverhalten von mouseup unter bestimmten Bedingungen, wenn das Feld derzeit keinen Fokus hat. Es funktioniert für diese Fälle:

• klicken, wenn das Feld nicht fokussiert ist
• klicken, wenn das Feld den Fokus hat
• tabbing in das Feld

Ich habe dies in Chrome 31, FF 26 und IE 11 getestet.

Fand eine tolle Lösung beim Lesen diesem Thread

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

Ich komme von Ende 2016 und dieser Code funktioniert nur in den letzten Versionen von Jquery (in diesem Fall jquery-2.1.3.js).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

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

Verwenden Sie clearTimeout für mehr Sicherheit, wenn Sie schnell zwischen zwei Eingaben wechseln.

Oder Sie können einfach <input onclick="select()"> Works perfect verwenden.

wenn ich FF 16.0.2 und Jquery 1.8.3 verwende, funktionierte der gesamte Code in der Antwort nicht.
Ich benutze Code so und arbeite.

$("input[type=text]").focus().select();

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

Sie können einfachen Code verwenden:

$('#idname').select();

Funktioniert hervorragend mit dem nativen JavaScript select().

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

oder allgemein:

$("input[type=text]")[0].select()