動か - SafariとChromeで動作しないjQueryを使ってフォーカスのあるテキストを選択する



safari append jquery (6)

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

https://src-bin.com

私は次のjQueryコード( この質問に似ています )がFirefoxとIEで動作しますが、ChromeとSafariでは失敗します(エラーはなく、ちょうどうまくいきません)。 回避策のアイデアはありますか?

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

Answer #1

requestAnimationFrame()コールバック内でsetSelectionRange()使用しsetSelectionRange()

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

select()はモバイルSafariでは機能しないため、 select() setSelectionRange()代わりにsetSelectionRange()使用してくださいsetSelectionRange() iOSデバイス(モバイルSafari)の入力フィールドのテキストプログラムで選択するを参照)。

テキストを選択する前にrequestAnimationFrameを使用して待機する必要があります。そうしないと、iOS上にキーボードが表示された後、要素が正しくスクロールされて表示されません。

setSelectionRange()を使用する場合は、入力タイプをtextに設定することが重要text 。そうでない場合は、Chromeで例外がスローされることがあります(Chrome で入力タイプ= "番号"のselectionStart / selectionEndを参照)。


Answer #2

これはinput type = "text"要素でうまく動作します。 #souper_fancyはどのような要素ですか?

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

Answer #3

これはクロムでも有効です:

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

Answer #4

選択を解除するonmouseupイベントです。追加する必要があります:

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

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




google-chrome