Auswählen von Text im Fokus mit jQuery funktioniert in Safari und Chrome nicht

Ich habe den folgenden jQuery-Code (ähnlich dieser Frage ), der in Firefox und IE funktioniert, aber in Chrome und Safari fehlschlägt (keine Fehler, funktioniert einfach nicht). Irgendwelche Ideen für eine Problemumgehung?

$("#souper_fancy").focus(function() { $(this).select() });

Es ist das Ereignis onmouseup, das dazu führt, dass die Auswahl nicht mehr ausgewählt wird. Sie müssen also nur Folgendes hinzufügen:

$("#souper_fancy").mouseup(function(e){
    e.preventDefault();
});

$('#randomfield').focus(function(event) {
    setTimeout(function() {$('#randomfield').select();}, 0);
});

Dies funktioniert gut für Elemente vom Typ input = "text". Was für ein Element ist #souper_fancy?

$("#souper_fancy").focus(function() {
    $(this).select();
});

Wenn Sie nur die Standardeinstellung beim Mouseup verhindern, ist die Textauswahl jederzeit aktiviert. Das MOUSEUP-Ereignis ist dafür verantwortlich, die Textauswahl zu löschen. Indem Sie jedoch das Standardverhalten verhindern, können Sie die Auswahl des Textes mit der Maus nicht aufheben.

Um dies zu vermeiden und die Textauswahl wieder zum Laufen zu bringen, können Sie ein Flag auf FOCUS setzen, es aus MOUSEUP lesen und zurücksetzen, damit zukünftige MOUSEUP-Ereignisse wie erwartet funktionieren.

$("#souper_fancy").focus(function() {
    $(this).select();

    //set flag for preventing MOUSEUP event....
    $this.data("preventMouseUp", true);
});

$("#souper_fancy").mouseup(function(e) {
    var preventEvent = $this.data("preventMouseUp");

    //only prevent default if the flag is TRUE
    if (preventEvent) {
        e.preventDefault();
    }

    //reset flag so MOUSEUP event deselect the text
    $this.data("preventMouseUp", false);
});

Während dies für die Auswahl in IE, Firefox, Chrome, Safari und Opera funktioniert, können Sie es nicht bearbeiten, indem Sie ein zweites Mal in Firefox, Chrome und Safari klicken. Nicht ganz sicher, aber ich denke, dies kann daran liegen, dass diese 3 Browser ein Fokusereignis erneut ausgeben, obwohl das Feld bereits fokussiert ist, sodass Sie den Cursor nie tatsächlich einfügen können (da Sie ihn erneut auswählen), während dies im IE der Fall ist und Opera scheint das nicht zu tun, so dass das Fokusereignis nicht erneut ausgelöst wurde und somit der Cursor eingefügt wird.

Ich habe in diesem Stack-Beitrag eine bessere Lösung gefunden , die dieses Problem nicht aufweist und in allen Browsern funktioniert.

Dies sollte auch in Chrom funktionieren:

$("#souper_fancy").focus(function() {
    var tempSouper = $(this);
    setTimeout(function(){
        tempSouper.select();
    },100);
});

Da bei Verwendung von setTimeout ein Flackern auftritt, gibt es eine andere ereignisbasierte Lösung. Auf diese Weise hängt das Ereignis 'focus' das Ereignis 'mouseup' an und der Ereignishandler löst sich wieder.

    function selectAllOnFocus(e) {
    if (e.type == "mouseup") { // Prevent default and detach the handler
        console.debug("Mouse is up. Preventing default.");
        e.preventDefault();
        $(e.target).off('mouseup', selectAllOnFocus);
        return;
    }
    $(e.target).select();
    console.debug("Selecting all text");
    $(e.target).on('mouseup', selectAllOnFocus);
}

Verdrahten Sie dann das erste Ereignis

    $('.varquantity').on('focus', selectAllOnFocus);

Verwenden Sie setSelectionRange()innerhalb eines Rückrufs, um requestAnimationFrame():

$(document).on('focus', '._selectTextOnFocus', (e) => {
    var input = e.currentTarget;
    var initialType = e.currentTarget.type;

    requestAnimationFrame(() => {
        // input.select() is not supported on iOS
        // If setSelectionRange is use on a number input in Chrome it throws an exception,
        // so here we switch to type text first.
        input.type = "text";
        input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999);
        input.type = initialType;
    });
});

Verwenden setSelectionRange() Sie statt , select()da select()nicht funktioniert in der mobilen Safari (siehe Programmatically Auswahl Text in einem Eingabefeld auf iOS - Geräten (mobile Safari) ).

Es ist notwendig, mit zu warten requestAnimationFrame bevor Sie den Text auswählen. Andernfalls wird das Element nach dem Aufrufen der Tastatur unter iOS nicht richtig angezeigt.

Bei Verwendung ist setSelectionRange()es wichtig, den Eingabetyp auf zu setzen text, da sonst in Chrome Ausnahmen ausgelöst werden können (siehe selectionStart / selectionEnd on input type = "number" in Chrome nicht mehr zulässig ).

Wenn jemand wieder auf dieses Problem stößt, habe ich hier eine reine JS-Lösung bekommen, die (im Moment) auf allen Browsern inkl. Funktioniert. Handy, Mobiltelefon

<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">

(ohne setTimeout () funktioniert es nicht auf Safari, Mobile Safari und MS Edge)