Выбор текста в фокусе с помощью jQuery, не работающего в Safari и Chrome

У меня есть следующий код jQuery (похожий на этот вопрос ), который работает в Firefox и IE, но не работает (без ошибок, просто не работает) в Chrome и Safari. Есть идеи обходного пути?

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

Это событие onmouseup приводит к тому, что выбор становится невыделенным, поэтому вам просто нужно добавить:

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

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

Это отлично работает для элементов input type = "text". Что это за элемент #souper_fancy?

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

Простое предотвращение действия по умолчанию при наведении указателя мыши приводит к тому, что выделение текста всегда включено. Событие MOUSEUP отвечает за очистку выделения текста. Однако, предотвращая его поведение по умолчанию, вы не можете отменить выбор текста с помощью мыши.

Чтобы избежать этого и снова заставить выделение текста работать, вы можете установить флаг на FOCUS, прочитать его из MOUSEUP и сбросить его, чтобы будущие события MOUSEUP работали должным образом.

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

Хотя это работает для выбора его в IE, Firefox, Chrome, Safari и Opera, оно не позволит вам редактировать его, щелкнув второй раз в Firefox, Chrome и Safari. Не совсем уверен, но я думаю, что это может быть связано с тем, что эти 3 браузера повторно выдают событие фокуса, даже если поле уже имеет фокус, что никогда не позволяет вам фактически вставить курсор (поскольку вы выбираете его снова), тогда как в IE и Opera, похоже, этого не происходит, поэтому событие фокуса не запускалось снова, и, таким образом, курсор вставляется.

Я нашел лучшее исправление в этом сообщении стека, которое не имеет этой проблемы и работает во всех браузерах.

Это должно работать и в хроме:

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

Поскольку при использовании setTimeout появляется мерцание, существует другое решение на основе событий. Таким образом, событие 'focus' присоединяет событие 'mouseup', и обработчик событий снова отключается.

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

Затем подключите первое событие

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

Используйте setSelectionRange()внутри обратного вызова, чтобы 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;
    });
});

Использовать setSelectionRange()вместо, select()поскольку select()не работает в мобильном Safari (см. Программный выбор текста в поле ввода на устройствах iOS (мобильный Safari) ).

requestAnimationFrameПеред выделением текста необходимо подождать using , иначе элемент не будет правильно прокручен в поле зрения после появления клавиатуры на iOS.

При использовании setSelectionRange()важно установить тип ввода text, иначе в Chrome могут возникнуть исключения (см. SelectionStart / selectionEnd о input type = "number", больше не разрешенном в Chrome ).

Если кто-то снова столкнется с этой проблемой, у меня есть чистое JS-решение, которое (на данный момент) работает во всех браузерах, включая. мобильный

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

(без setTimeout () он не работает в Safari, мобильном Safari и MS Edge)