フォーカスを受け取ったときにテキストボックスのすべてのコンテンツを選択します（Vanilla JSまたはjQuery）

テキストボックスがフォーカスを受け取ったときにテキストボックスのすべてのコンテンツを選択するVanilla JSまたはjQueryソリューションとは何ですか？

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

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

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

jQueryは、場合によっては使いやすいJavaScriptではありません。

この例を見てください：

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

出典：CSSトリック、MDN

これは単なるChrome / Safariの問題ではなく、Firefox 18.0.1でも非常によく似た動作が発生しました。おもしろいのは、これはMSIEでは発生しないことです。ここでの問題は、入力コンテンツの選択を強制的に解除する最初のマウスアップイベントです。最初の発生を無視してください。

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

timeOutアプローチは奇妙な動作を引き起こし、すべてのmouseupイベントをブロックすると、入力要素をもう一度クリックして選択を削除することはできません。

HTML：

Enter Your Text : <input type="text" id="text-filed" value="test">

JSの使用：

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

JQueryの使用：

$("#text-filed").focus(function() { $(this).select(); } );

React JSの使用：

レンダリング機能内のそれぞれのコンポーネントで-

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

私の解決策は、タイムアウトを使用することです。うまくいくようです

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

これはiOSでも機能します。

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

インラインコードが悪いスタイルであることは知っていますが、これを.jsファイルに入れたくありませんでした。jQueryなしで動作します！

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

ここでの回答はある程度役に立ちましたが、Chromeの上下ボタンをクリックすると、HTML5数値入力フィールドで問題が発生しました。

いずれかのボタンをクリックして、ボタンの上にマウスを置いたままにすると、マウスアップが放棄されたために、マウスボタンを押しているかのように番号が変化し続けます。

以下のようにトリガーされたらすぐにマウスアップハンドラーを削除して、これを解決しました。

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

これが将来の人々に役立つことを願っています...

これは機能します、これを試してください-

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Safari / IE 9とChromeで動作しますが、Firefoxでテストする機会がありませんでした。

ここにはすでにたくさんの答えがあることは知っていますが、これは今のところ欠けています。ajaxで生成されたコンテンツでも機能するソリューション：

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

いくつかの関数呼び出しを組み込むことで、ザックの答えを少し改善することができました。その答えの問題は、onMouseUpを完全に無効にすることです。これにより、フォーカスがあるとテキストボックス内をクリックすることができなくなります。

これが私のコードです：

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

これはザックの答えよりもわずかに改善されています。IEで完全に動作し、Chromeではまったく動作せず、FireFoxでも成功します（文字通り1回おきに）。FFまたはChromeで確実に機能させる方法について誰かが考えている場合は、共有してください。

とにかく、これをもう少し良くするために何ができるかを共有したいと思いました。

@Travisや@Mariと同様に、ユーザーがクリックしたときに自動選択する必要がありました。これは、 mouseupイベントのが、ユーザーがクリックするのを妨げることはありません。IE11、Chrome 45、Opera 32、Firefox 29（これらは現在インストールしているブラウザーです）で機能する私が思いついたソリューションは、マウスクリックに関連する一連のイベントに基づいています。

フォーカスのないテキスト入力をクリックすると、（とりわけ）次のイベントが発生します。

• mousedown：クリックに応じて。デフォルトの処理レイズfocus必要に応じて、選択の開始を設定します。
• focus：のデフォルト処理の一部としてmousedown。
• mouseup：クリックの完了。デフォルトの処理により、選択が終了します。

すでにフォーカスされているテキスト入力をクリックすると、focusイベントはスキップされます。@Travisと@Mariの両方が気づいたように、デフォルトのの処理はmouseup、focusイベントが発生した場合にのみ防止する必要があります。ただし、「focus発生しませんでした」イベントはないため、mousedownハンドラー内でこれを推測する必要があります。

@Mariのソリューションでは、jQueryをインポートする必要がありますが、これは避けたいです。@Travisのソリューションはを検査することでこれを行いdocument.activeElementます。私は正確に彼の解決策は、ブラウザ間で動作しない理由を知りませんが、テキスト入力にフォーカスがあるかどうかを追跡するための別の方法があります：単純に従うfocusとblurイベントを。

これは私のために働くコードです：

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

これが誰かのお役に立てば幸いです。:-)

onclick="this.focus();this.select()"

テキストボックスがフォーカスを受け取ったときにテキストボックスのすべてのコンテンツを選択するJavaScriptまたはjQueryソリューションとは何ですか？

次の属性を追加するだけです。

onfocus="this.select()"

例えば：

<input type="text" value="sometext" onfocus="this.select()">

（正直なところ、なぜ他に何かが必要になるのかはわかりません。）

これは私にとってはうまくいきました（回答ではなくコメントであるので投稿します）

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

編集：@DavidGのリクエストによると、これが機能する理由がわからないため、詳細を提供することはできませんが、それは、フォーカスイベントが上または下に伝搬すること、および通知を取得する入力要素と関係があると思いますそれはフォーカスを受けています。タイムアウトを設定すると、要素がそれを実行したことを認識するための時間が与えられます。

イベントをつなぎ合わせると.one、このスレッドの他の場所で提案されているように使用する必要がなくなると思います。

例：

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

注：ASP.NETでプログラミングしている場合は、C＃でScriptManager.RegisterStartupScriptを使用してスクリプトを実行できます。

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

または、他の回答で提案されているHTMLページにスクリプトを入力します。

私はこれをいくつかの場所にまきました、完璧に働きます！

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

私はパーティーに少し遅れましたが、これはIE11、Chrome、Firefoxで完全に動作します。

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

私の解決策は次のとおりです：

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

したがって、マウスアップは通常は機能しますが、入力によってフォーカスを得た後、選択を解除しません