jquery入力フォーカス上のすべてを選択

このコードを使用して、ユーザーがフィールドにフォーカスしたときにフィールド内のすべてのテキストを選択しようとします。何が起こるかというと、1秒間すべてを選択してから、選択を解除し、クリックしたところに入力カーソルが残っている...

$("input[type=text]").focus(function() {
   $(this).select();
});

すべてを選択したままにしておきたい。

のclick代わりに使用してみてくださいfocus。マウスイベントとキーイベントの両方で機能するようです（少なくともChrome / Macでは）。

jQuery <バージョン1.7：

$("input[type='text']").click(function () {
   $(this).select();
});

jQueryバージョン1.7以降：

$("input[type='text']").on("click", function () {
   $(this).select();
});

ここにデモがあります

私はこれが起こると思います：

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

回避策はselect（）を非同期に呼び出すことで、focus（）の後に完全に実行されるようにすることができます。

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

これはより良い解決策だと思います。onclickイベントで単に選択するのとは異なり、マウスでテキストを選択/編集することはできます。IE8を含む主要なレンダリングエンジンで動作します。

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

ここには適切な回答がいくつかあり、@ user2072367が私のお気に入りですが、クリックではなくタブでフォーカスすると予期しない結果になります。（予期しない結果：タブを介してフォーカスした後にテキストを通常選択するには、もう一度クリックする必要があります）

このフィドルはその小さなバグを修正し、追加の$（this）を変数に格納して、冗長なDOM選択を回避します。見てみな！（：

IEでテスト済み> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

慎重に検討した後、このスレッド内のはるかにクリーンなソリューションとしてこれを提案します。

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

jsFiddleのデモ

問題：

ここに少し説明があります：

まず、フィールドにマウスまたはタブで移動したときのイベントの順序を見てみましょう。
次のように、関連するすべてのイベントをログに記録できます。

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

注：私はこのソリューションを後でイベントパイプラインで発生するのclickではなく使用するように変更mouseupし、@ Jocieのコメントに従ってFirefoxでいくつかの問題を引き起こしているようです

一部のブラウザは、mouseupまたはclickイベント中にカーソルを配置しようとします。キャレットを1つの位置から開始し、ドラッグしてテキストを強調表示する場合があるので、これは理にかなっています。実際にマウスを持ち上げるまで、キャレットの位置を指定することはできません。そのため、処理focusする関数は応答が早すぎて、ブラウザがあなたの位置を上書きするようにしておきます。

しかし、問題は、フォーカスイベントを本当に処理したいということです。これは、誰かがフィールドに初めて入ったときに知らせます。その後は、ユーザーの選択動作をオーバーライドし続けたくありません。

ソリューション：

代わりに、focusイベントハンドラー内で、発生するclick（クリックkeyupイン）イベントと（タブイン）イベントのリスナーをすばやくアタッチできます。

注：タブイベントのキーアップは、実際には前のフィールドではなく、新しい入力フィールドで発生します

イベントを1回だけ起動します。を使用することもできます.one("click keyup)が、これにより、イベントタイプごとにイベントハンドラが1回呼び出されます。代わりに、マウスアップまたはキーアップが押されるとすぐに、関数を呼び出します。まず最初に、両方のハンドラーを削除します。そうすれば、タブで移動したか、マウスで移動したかは関係ありません。関数は1回だけ実行する必要があります。

注：ほとんどのブラウザはタブイベント中にすべてのテキストを自然に選択しますが、animatedgifが指摘したように、keyupイベントを処理する必要があります。そうしないと、mouseupタブを挿入したときにいつでもイベントが残ります。両方をリッスンして、選択を処理したらすぐにリスナーをオフにします。

これでselect()、ブラウザが選択を行った後に呼び出すことができるため、デフォルトの動作を確実にオーバーライドします。

最後に、保護を強化するために、および関数にイベントの名前空間を追加して、メソッドが他のリスナーを削除しないようにすることができます。mouseupkeyup.off()

IE 10以降、FF 28以降、Chrome 35以降でテスト済み

または、jQueryを、呼び出されonceた関数で拡張したい場合は、任意の数のイベントに対して1回だけ実行されます。

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

次に、次のようにコードをさらに簡略化できます。

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

フィドルのデモ

これにより作業が行われ、テキストの一部をマウスで選択できなくなるという問題が回避されます。

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

このバージョンはiOSで動作し、Windows Chromeでの標準のドラッグによる選択を修正します

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

これらのソリューションのほとんどの問題は、入力フィールド内のカーソル位置を変更すると、正しく機能しないことです。

このonmouseupイベントは、フィールド内のカーソル位置を変更します。フィールドはその後に発生しますonfocus（少なくともChromeとFF内で）。無条件に破棄するmouseupと、ユーザーはマウスでカーソル位置を変更できなくなります。

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

mouseupフィールドに現在フォーカスがない場合、コードは条件付きでデフォルトの動作を防止します。次の場合に機能します。

• フィールドがフォーカスされていないときにクリック
• フィールドにフォーカスがあるときにクリック
• フィールドにタブで移動する

私はこれをChrome 31、FF 26、IE 11でテストしました。

このスレッドを読んで素晴らしいソリューションを見つけました

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

私は2016年後半から来て、このコードは最近のバージョンのjquery（この場合はjquery-2.1.3.js）で動作します。

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

私はFF 16.0.2とjquery 1.8.3を使用していますが、回答のすべてのコードが機能しませんでした。
私はこのようなコードを使用して動作します。

$("input[type=text]").focus().select();

var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

2つの入力をすばやく切り替える場合は、セキュリティを強化するためにclearTimeoutを使用します。clearTimeout古いタイムアウトを消去します...

ネイティブJavaScriptとうまく連携しますselect()。

$("input[type=text]").focus(function(event) {
   event.currentTarget.select();
});

または一般的に：

$("input[type=text]")[0].select()

または、<input onclick="select()">Worksパーフェクトを使用することもできます。

簡単なコードを使用できます。

$('#idname').select();

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

私は常にrequestAnimationFrame()内部のイベント後のメカニズムを飛び越えて使用しますが、これはFirefoxで完全に機能します。Chromeではテストしていません。

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});