Safari ve Chrome'da çalışmayan jQuery kullanarak odakta metin seçme

Firefox ve IE'de çalışan, ancak Chrome ve Safari'de başarısız olan (hata yok, sadece çalışmıyor) aşağıdaki jQuery koduna sahibim ( bu soruya benzer ). Bir geçici çözüm için herhangi bir fikriniz var mı?

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

Seçimin seçilmemesine neden olan onmouseup olayıdır, bu nedenle eklemeniz gerekir:

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

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

Bu, input type = "text" öğeleri için iyi çalışır. #Souper_fancy ne tür bir unsurdur?

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

Sadece mouseup üzerinde varsayılanı engellemek, metin seçiminin her zaman AÇIK olmasına neden olur. MOUSEUP olayı, metin seçimini temizlemekten sorumludur. Ancak, varsayılan davranışını engelleyerek, fareyi kullanarak metnin seçimini kaldıramazsınız.

Bunu önlemek ve metin seçiminin tekrar çalışmasını sağlamak için, FOCUS'da bir bayrak ayarlayabilir, MOUSEUP'tan okuyabilir ve gelecekteki MOUSEUP olaylarının beklendiği gibi çalışması için sıfırlayabilirsiniz.

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

Bu, IE, Firefox, Chrome, Safari ve Opera'da seçmek için çalışırken, Firefox, Chrome ve Safari'de ikinci kez tıklayarak düzenlemenize izin vermez. Tam olarak emin değilim, ancak bence bu, alan zaten odaklanmış olsa bile, bu 3 tarayıcının bir odak olayını yeniden yayınlamasından kaynaklanıyor olabilir, dolayısıyla imleci gerçekten yerleştirmenize asla izin vermez (tekrar seçiyorsunuz), oysa IE'de ve Opera öyle görünüyor ki, bunu yapmıyor, bu yüzden odak olayı tekrar ateşlenmedi ve böylece imleç yerleştirildi.

Bu Yığın gönderisinde bu sorunu olmayan ve tüm tarayıcılarda çalışan daha iyi bir düzeltme buldum .

Bu, Chrome'da da çalışmalıdır:

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

SetTimeout kullandığınızda titreme olduğu için, olay tabanlı başka bir çözüm vardır. Bu şekilde, "odak" olayı "mouseup" olayını ekler ve olay işleyicisi kendini yeniden ayırır.

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

Ardından ilk etkinliği aktarın

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

Kullanım setSelectionRange()olan geri aramayı iç 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;
    });
});

Kullanım setSelectionRange()yerine select()beri select()mobil Safari (değil çalışır bkz iOS cihazlarda bir giriş alanına Programlı seçme metin (mobil Safari) ).

Kullanmayı beklemek gerekiyor requestAnimationFrameMetni seçmeden önce , aksi takdirde öğe, klavye iOS'ta açıldıktan sonra doğru şekilde görünüme kaydırılmaz.

Kullanırken setSelectionRange()giriş türünü ayarlamak önemlidir.text , aksi takdirde Chrome'da istisnalar atabilir (bkz . Giriş türü = "sayı" üzerinde seçimStart / selectionEnd Chrome'da artık izin verilmez ).

Bu sorunla tekrar karşılaşırsanız, burada (şu anda) tüm tarayıcılarda çalışan saf bir JS çözümü buldum. seyyar

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

(setTimeout () olmadan Safari, mobil Safari ve MS Edge üzerinde çalışmıyor)