Zaznaczanie tekstu przy użyciu jQuery nie działa w Safari i Chrome

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

To działa dobrze dla elementów input type="text". Jaki element to # souper_fancy?

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

Samo zapobieganie domyślnemu ustawieniu myszki powoduje, że zaznaczenie tekstu jest włączone przez cały czas. Zdarzenie MOUSEUP jest odpowiedzialne za wyczyszczenie zaznaczenia tekstu. Jednak, zapobiegając jego domyślnemu zachowaniu, nie można usunąć zaznaczenia tekstu za pomocą myszy.

Aby tego uniknąć i ponownie uruchomić zaznaczenie tekstu, możesz ustawić flagę na ostrości, odczytać ją z MOUSEUP i zresetować, aby przyszłe zdarzenia MOUSEUP działały zgodnie z oczekiwaniami.

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

Chociaż działa to przy wybraniu go w IE, Firefox, Chrome, Safari i operze, nie pozwoli Ci go edytować, klikając drugi raz w Firefox, Chrome i Safari. Nie jestem do końca pewien, ale myślę, że może to być spowodowane tymi 3 przeglądarkami ponownie wydającymi Zdarzenie focus, mimo że pole już ma focus, więc nigdy nie pozwala na włożenie kursora (ponieważ zaznaczasz go ponownie), podczas gdy w IE i operze wygląda na to, że to nie robi, więc zdarzenie focus nie zostało uruchomione ponownie, a tym samym kursor zostanie wstawiony.

Znalazłem lepszą poprawkę w tym poście stosu , która nie ma tego problemu i działa we wszystkich przeglądarkach.

To powinno działać również w chrome:

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

Ponieważ podczas używania setTimeout występuje migotanie, istnieje inne rozwiązanie oparte na zdarzeniach. W ten sposób Zdarzenie "focus" dołącza Zdarzenie "mouseup" i obsługa zdarzenia ponownie się odłącza.

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

Następnie przełącz pierwsze zdarzenie

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

Użyj setSelectionRange() wewnątrz wywołania zwrotnego do 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;
    });
});

Użyj setSelectionRange() zamiast select(), ponieważ select()nie działa w mobilnej przeglądarce Safari (zobacz programowo zaznaczanie tekstu w polu wprowadzania na urządzeniach z systemem iOS (mobilna przeglądarka Safari)).

Przed zaznaczeniem tekstu należy poczekać na użycie requestAnimationFrame, w przeciwnym razie element nie zostanie prawidłowo przewinięty do widoku po pojawieniu się klawiatury na iOS.

Podczas używania setSelectionRange() ważne jest, aby ustawić typ wejścia na text, w przeciwnym razie może wyrzuć wyjątki w Chrome (zobacz selectionStart / selectionEnd on input type = "number" nie jest już dozwolone w Chrome ).

Jeśli ktoś ponownie natknie się na ten problem, mam tutaj czyste rozwiązanie JS, które (w tej chwili) działa na wszystkich przeglądarkach włącznie. mobile

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