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

Ответ 1

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

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

Ответ 2

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

Ответ 3

Это отлично подходит для элементов типа ввода = "текст". Какой элемент #souper_fancy?

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

Ответ 4

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

Чтобы избежать этого и снова выберите текст, вы можете установить флаг на FOCUS, прочитать его с MOUSEUP и reset, чтобы будущие события 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);
});

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Поскольку при использовании 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);

Ответ 8

Используйте 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, иначе элемент не будет правильно прокручиваться в окно просмотра после того, как клавиатура появится на iOS.

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