web-dev-qa-db-ja.com

テキストボックスがフォーカスを受けたときにtextboxの内容をすべて選択します（Vanilla JSまたはjQuery）。

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

javascriptjqueryuser-interface
291
Jon Erickson
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
350
John Sheehan
<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />
203
Zach
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
40
Tomas Kirda
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
39
Yogesh Agrawal

これは単にChrome/Safariの問題ではありません。Firefox18.0.1でも同じような動作をしました。面白い部分はこれがMSIEで起こらないということです！ここでの問題は、最初のmouseup入力コンテンツの選択解除を強制するイベントなので、最初の発生を無視することです。

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

TimeOutアプローチは奇妙な振る舞いを引き起こします、そして、あなたは入力要素をもう一度クリックして選択を削除することができないすべてのmouseupイベントをブロックします。

20
Cizar

jQueryはJavaScriptではないため、より使いやすい場合があります。

この例を見てください。

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

CSS Trics から。

19
aaa

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

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

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

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

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

5
Kai

私はインラインコードが悪いスタイルであることを知っています、しかし、私はこれを.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>
4
user3296743

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

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

ここでの答えはある程度私を助けてくれました、しかし私はChromeの上/下ボタンをクリックするときにHTML5数入力フィールドに問題がありました。

ボタンの1つをクリックしてマウスをボタンの上に置いた場合、マウスボタンが押されていたかのように番号が変わり続けます。これは、マウスアップが破棄されたためです。

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

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

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

3
H2Os

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

これが誰かに役立つことを願っています。 :-)

2
Jonathan Gilbert

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()}
/>
2
Aniruddha Shevle

これでうまくいくでしょう、これを試してください - 

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

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

2
Adithya Kumaranchath

私はいくつかの関数呼び出しを取り入れることによってZachの答えをわずかに改善することができました。その答えの問題点は、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では交互に成功します（文字通り2回）。 FFまたはChromeで確実に機能させる方法について誰かが考えている場合は、共有してください。

とにかく、私はこれをもう少し良くするために自分ができることを共有したいと考えました。

2
Travis

テキストボックスが受け取られたときにテキストボックスのすべての内容を選択選択するJavaScriptまたはjQueryソリューションとは何ですか？

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

onfocus="this.select()"

例えば：

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

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

1
ADTC

これは私のために働いた（それは答えではなく、コメントになっているので投稿する）

 $("#textBox").focus().select();
1
Vijay Vepakomma
onclick="this.focus();this.select()"
1
Rahul
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

編集：@ DavidGの要求によると、これが機能する理由がわからないので詳細を提供できませんが、フォーカスイベントが上下に伝搬すること、または入力要素が通知を受け取ることに関係していると思います注目を集めました。タイムアウトを設定すると、それが実現されていることを実感する瞬間が得られます。

0
Michael Tranchida

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

例：

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

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

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

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

0
Exel Gamboa

パーティーにはちょっと遅れていますが、これはIE11、Chrome、Firefoxで、マウスを乱すことなく（そしてJQueryなしで）完璧に機能します。

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);
        });
    }
});
0
Guillaume B.

私はこれをどこかに蒔きます、完璧に働きます！

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