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

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

Это прекрасно работает для ввода типа= "текст" элементов. Что это за элемент #souper_fancy?

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

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

чтобы избежать этого и заставить выделение текста работать снова, вы можете установить флаг на фокус, прочитать его из 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 браузера повторно выдают событие focus, хотя поле уже имеет фокус, поэтому вы никогда не сможете вставить курсор (так как вы его снова выбираете), тогда как в IE и Opera он, похоже, не делает этого, поэтому событие focus не было запущено снова и, таким образом, курсор будет вставлен.

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

Это должно работать также в chrome:

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

потому что есть мерцание при использовании setTimeout, есть еще одно решение на основе событий. Таким образом, событие "фокус" присоединяет событие "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 (mobile Safari)).

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

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

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

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

(без setTimeout () он не работает на Safari, mobile Safari и MS Edge)