Виділення тексту для фокусування за допомогою 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);
});

Це чудово працює для елементів вводу 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 (див програмним шляхом виділення тексту в поле введення КСН пристроїв (мобільний 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, мобільному Safari та MS Edge)