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

85

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() });
user140550
quelle
Ich möchte genaues Verhalten in der Safari von iPad / iPhone. Dies funktioniert nicht in iPod / iPhone-Browsern. irgendeine Ahnung. Die unten akzeptierte Antwort gilt nur für Desktop-basiertes Chrome / Safari.
Anand
5
Hinweis: Die hier akzeptierte Antwort löst nur die Hälfte des Problems. Dadurch funktioniert die Auswahl, es ist jedoch schwierig, die Auswahl mit nachfolgenden Klicks aufzuheben. Eine bessere Lösung finden Sie hier: stackoverflow.com/questions/3380458/…
DEZA

Antworten:

188

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

quelle
3
Weitere Informationen
Rajat
Wie erreicht man dasselbe mit Prototype?
Tehfink
Sie können auch versuchen, eine Bindung an das "Klick" -Ereignis herzustellen, ohne zwei Bindungen vornehmen zu müssen.
uglymunky
@uglymunky Je nachdem, was Sie tun, funktioniert die Bindung an das Klickereignis nicht in allen Fällen. Schließlich gibt es andere Möglichkeiten, ein Eingabefeld auszuwählen, als darauf zu klicken, und Sie möchten, dass diese auch funktionieren (z. tickt hinein)
Tacroy
2
Ich möchte genaues Verhalten in der Safari von iPad / iPhone. Dies funktioniert nicht in iPod / iPhone-Browsern. irgendeine Ahnung.
Anand
25
$('#randomfield').focus(function(event) {
    setTimeout(function() {$('#randomfield').select();}, 0);
});
Alex0007
quelle
3
Dies ist die beste Antwort, wenn Sie versuchen, Text in einem Formularfeld für eine PhoneGap-App auszuwählen, die unter Android ausgeführt wird. Dies gibt dem Benutzer einen visuellen Hinweis darauf, dass der Text ausgewählt ist, während die akzeptierte Antwort dies nicht tut.
BallisticPugh
4

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

$("#souper_fancy").focus(function() {
    $(this).select();
});
Joe Chung
quelle
Es ist ein type = "text" -Element. Ich habe auch $ ("input [type = text]") ausprobiert. Funktioniert immer noch nicht mit jQuery 1.3.2 in Safari.
user140550
3

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);
});
ThiagoPXP
quelle
1

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.

johntrepreneur
quelle
1

Dies sollte auch in Chrom funktionieren:

$("#souper_fancy").focus(function() {
    var tempSouper = $(this);
    setTimeout(function(){
        tempSouper.select();
    },100);
});
Rubiwachs
quelle
Bitte fügen Sie konstruktives Feedback hinzu, warum OP das Problem sieht und Ihre Lösung es behebt.
Mirko Adari
1

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);
user2941872
quelle
1

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 ).

andrewh
quelle
0

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)

Claudio
quelle