jQuery-textareaからすべてのテキストを選択します


130

テキストエリア内をクリックすると、そのコンテンツ全体が選択されるようにするにはどうすればよいですか?

そして最終的にもう一度クリックすると、選択を解除します。



5
@Blender:いいえ、その質問は、textareaではなく、要素内のテキストを強調表示することに関するものです。2つはかなり異なります。
ティムダウン

回答:


194

ユーザーがマウスを使用してキャレットを移動しようとするたびにテキスト全体が選択されたときにユーザーが煩わしくならないようにするには、focusイベントではなくイベントを使用してこれを行う必要がありますclick。次の方法で処理を行い、Chromeで最も単純なバージョン(つまりselect()focusイベントハンドラーでtextareaのメソッドを呼び出すだけ)が機能しないという問題を回避します。

jsFiddle:http ://jsfiddle.net/NM62A/

コード:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

jQueryバージョン:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

10
フォーカスまたはクリックイベントでテキストを自動的に選択するのは本当に面倒なので、別の「すべてのテキストを選択」ボタンを使用してこのようなものを実装する方が良いと思います。
RobG 2011

2
これは私にとってChromeでは失敗し、実用的な解決策は次のとおりです。stackoverflow.com
a

@zack:この回答のjsFiddleの例は、Chromeで動作します。それはあなたのためではありませんか?あなたがリンクしている答えがもっと簡単だということに同意します。
Tim Down

@TimDown:あなたは正しい、私は少し熱心すぎていました-実際には「クリック」では正しく機能しますtabが、テキストエリアに入ると失敗します-他の解決策は両方のケースで機能します:)
zack

少し上記のコードを変更し、それが魅力のように動作します... $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); あなたは使用せずにテキストボックスを参照する必要がthisフルパスでそれを参照するだけで...それが動作します...
pratikabu

14

タブとクロムの問題の解決策と新しいjqueryの方法によるより良い方法

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

11

私はこれを使ってしまいました:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

しかし、テキストがすでに選択されているかどうかを確認する方法がわからないので、2つのアクションを元に戻すことができます:(
Alex

1
@アレックス:私があなたなら、私はこれであまり混乱しないでしょう。ユーザーは、テキストエリアからの標準的な動作を期待しています。
Tim Down

いいえ、この特定のテキストエリアはコピーと貼り付けのみを目的としています。内部にあるすべてのテキストは大きな暗号化された文字列であり、完全に置き換えるか、クリップボードにコピーすることしかできません
Alex

@アレックス:ああ、そうです。readonly次に、属性を追加して、読み取り専用にすることができます。
Tim Down

1
@ホリスター:いいえ、ユーザーまたはスクリプトがdiv内のコンテンツを選択することは完全に可能です。おそらくクリップボードにコピーすることを考えているでしょう。これは、ZeroClipboardのようなFlashベースのライブラリなしではスクリプトでは不可能です。
Tim Down


5

少し短いjQueryバージョン:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Chromeのコーナーケースを正しく処理します。例については、http://jsfiddle.net/Ztyx/XMkwm/を参照してください。


4

要素内のテキストの選択(マウスでの強調表示に似ています)

:)

その投稿で受け入れられた回答を使用して、次のような関数を呼び出すことができます。

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

多分この質問に重複としてフラグを立てた方が便利かもしれませんか?それはあなたの答えではなかったので、2つの質問をマージする方が良いでしょう。
ブレンダー2011

同意-OPは彼女の実装についての追加の説明から恩恵を受けることができる。:)
トッド

その質問は、textareaではなく、要素内のテキストを強調表示することに関するものです。2つはかなり異なります。
ティムダウン

おかげで、私はこれを$(this).select()使用してこれを実行できることがわかりました。コードが少ないため、これを使用します:)
Alex
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.