it-swarm.com.de

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

Ich habe den folgenden jQuery-Code (ähnlich wie diese Frage ), der in Firefox und IE funktioniert, jedoch fehlschlägt (keine Fehler, funktioniert nicht) in Chrome und Safari. Irgendwelche Ideen für einen Workaround?

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

Das Onmouseup-Ereignis bewirkt, dass die Auswahl nicht ausgewählt wird. Sie müssen also nur Folgendes hinzufügen:

$("#souper_fancy").mouseup(function(e){
    e.preventDefault();
});
186
keithnorm
$('#randomfield').focus(function(event) {
    setTimeout(function() {$('#randomfield').select();}, 0);
});
24
Alex0007

Dies funktioniert gut für Eingabe type = "Text" Elemente. Was für ein Element ist #souper_fancy?

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

Wenn Sie die Standardeinstellung beim Mouseup nur verhindern, wird die Textauswahl jederzeit aktiviert. Das MOUSEUP-Ereignis ist dafür verantwortlich, die Textauswahl zu löschen. Durch das Verhindern des Standardverhaltens können Sie den Text jedoch nicht mit der Maus abwählen.

Um dies zu vermeiden und die Textauswahl wieder zum Laufen zu bringen, können Sie ein Flag in FOCUS setzen, aus MOUSEUP lesen und es 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);
});
2
ThiagoPXP

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

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

1
johntrepreneur

Da bei der Verwendung von setTimeout Flimmern 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 von selbst ab.

    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);
}

Dann verdrahten Sie die erste Veranstaltung

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

Dies sollte auch in Chrom funktionieren:

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

Verwenden Sie setSelectionRange() innerhalb eines Rückrufs an 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 Sie setSelectionRange() anstelle von select(), da select() in Mobile Safari nicht funktioniert (siehe Programmgesteuerter Text in einem Eingabefeld auf iOS-Geräten (Mobile Safari) ).

Sie müssen mit requestAnimationFrame warten, bevor Sie den Text auswählen. Andernfalls wird das Element nicht korrekt angezeigt, nachdem die Tastatur unter iOS gestartet wurde.

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

0
andrewh

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

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

(ohne setTimeout () funktioniert es nicht bei Safari, mobiler Safari und MS Edge)

0
Claudio