jQueryを使用してフォーカスのあるテキストを選択するとSafariとChromeで機能しない

FirefoxとIEでは機能するがChromeとSafariでは失敗する（エラーがない、機能しない）次のjQueryコード（この質問に類似）があります。回避策のアイデアはありますか？

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

選択が選択解除される原因となっているのはonmouseupイベントであるため、以下を追加する必要があります。

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

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

これは、input 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;
    });
});

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

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

使用するsetSelectionRange()場合は、入力タイプをに設定することが重要ですtext。そうしないと、Chromeで例外がスローされる可能性があります（Chromeでは許可されなくなったinput type = "number"のselectionStart / selectionEndを参照してください）。

誰かがこの問題に再び遭遇した場合、私はここで純粋なJSソリューションを手に入れました。これは（現時点では）すべてのブラウザーで機能しています。モバイル

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

（setTimeout（）がないと、Safari、モバイルSafari、MS Edgeでは機能しません）