jquery input wählt alle im Fokus aus

Ich verwende diesen Code, um zu versuchen, den gesamten Text im Feld auszuwählen, wenn sich ein Benutzer auf das Feld konzentriert. Was passiert ist, es wählt alle für eine Sekunde aus, dann ist es nicht ausgewählt und der Tippcursor bleibt dort, wo ich geklickt habe ...

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

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

Versuchen Sie es mit clickanstelle von focus. Es scheint sowohl für Maus- als auch für Schlüsselereignisse 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

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 besteht möglicherweise darin, select () asynchron aufzurufen, sodass 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 zur einfachen Auswahl in einem Onclick-Ereignis wird die Auswahl / Bearbeitung von Text mit der Maus nicht verhindert. 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/

Hier gibt es einige anständige Antworten und @ user2072367 ist mein Favorit, aber es hat ein unerwartetes Ergebnis, wenn Sie sich eher über die Registerkarte als über den Klick konzentrieren. (unerwartetes Ergebnis: Um Text nach dem Fokussieren über die Registerkarte normal auszuwählen, müssen Sie ein weiteres Mal klicken.)

Diese Geige behebt diesen kleinen Fehler und speichert $ (this) zusätzlich 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 dies als weitaus sauberere Lösung 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 eine kleine Erklärung:

Schauen wir uns zunächst die Reihenfolge der Ereignisse an, wenn Sie mit der Maus oder der Registerkarte in ein Feld fahren.
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 so geändert, dass sie clicknicht mehr mouseupwie später in der Ereignis-Pipeline verwendet wird, und habe laut @ Jocies Kommentar einige Probleme in Firefox verursacht

Einige Browser versuchen, den Cursor während der Ereignisse mouseupoder zu positionieren click. Dies ist sinnvoll, da Sie das Caret möglicherweise an einer Position starten und ziehen möchten, um Text hervorzuheben. Es kann keine Bezeichnung für die Caret-Position geben, bis Sie die Maus tatsächlich angehoben haben. Funktionen, die damit umgehen focus, reagieren also zu früh, sodass der Browser Ihre Positionierung überschreiben kann.

Aber das Problem ist, dass wir wirklich mit dem Fokusereignis umgehen wollen. Es zeigt uns das erste Mal, dass jemand das Feld betreten hat. Nach diesem Zeitpunkt möchten wir das Benutzerauswahlverhalten nicht mehr überschreiben.

Die Lösung:

Stattdessen focuskönnen wir im Ereignishandler schnell Listener für die Ereignisse click(Click-In) und keyup(Tab-In) anhängen, die ausgelöst werden sollen.

Hinweis : Die Eingabe eines Registerkartenereignisses wird tatsächlich im neuen Eingabefeld ausgelöst , nicht im vorherigen

Wir wollen das Event nur einmal auslösen. Wir könnten verwenden .one("click keyup), 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. Als erstes entfernen wir die Handler für beide. Auf diese Weise spielt es keine Rolle, ob wir Registerkarten oder Mauszeiger verwenden. 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 wie animiertes GIF hervorhob , möchten wir das keyupEreignis weiterhin behandeln, da das mouseupEreignis sonst immer noch verweilt, wenn wir es mit Registerkarten versehen haben. Wir hören uns beide an, damit wir uns umdrehen können Schalten Sie die Hörer aus, sobald wir die Auswahl bearbeitet haben.

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

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

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

Wenn Sie jQuery um eine Funktiononce erweitern möchten, die aufgerufen wird und bei einer beliebigen 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 folgendermaßen 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 auch 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 beim Ändern der Cursorposition innerhalb des Eingabefelds nicht richtig funktionieren.

Das onmouseupEreignis ändert die Cursorposition innerhalb des Feldes, das danach ausgelöst wird onfocus(zumindest innerhalb von Chrome und FF). Wenn Sie das bedingungslos verwerfen, mouseupkann 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 bedingt das mouseupStandardverhalten, 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
• ins Feld tippen

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

Beim Lesen dieses Threads eine großartige Lösung gefunden

$(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 aus Ende 2016 und dieser Code funktioniert nur in neueren Versionen von jquery (in diesem Fall jquery-2.1.3.js).

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

Bei Verwendung von FF 16.0.2 und JQuery 1.8.3 funktionierte der gesamte Code in der Antwort nicht.
Ich benutze solchen Code und arbeite.

$("input[type=text]").focus().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 Eingängen wechseln. ClearTimeout bereinigt das alte Timeout ...

Funktioniert hervorragend mit nativem JavaScript select().

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

oder allgemein:

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

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

Sie können einfachen Code verwenden:

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

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

Ich requestAnimationFrame()springe immer über interne Post-Event-Mechanismen und das funktioniert perfekt in Firefox. Nicht in Chrome getestet.

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