テキストエリアや入力フォームにフォーカスが来たときにテキストを全選択状態にする方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

たった23文字のコードを追加するだけで, 入力フォームやテキストエリアにフォーカスが来たときに 文字を全選択にする方法について書きました.

超簡単に出来る割にはあまり使われていないのでざっくりまとめてみました. トラックバックフォームなどに使ってくださいな♪

Sample

普通の input

全選択 ver. の input

Tips

クリック時に全選択にする

onclick 時に select 関数を呼んであげると全選択状態になります. 上記のサンプルの例でいくと, このコード

<textarea>I am a pen.</textarea>

onclick=”this.select();”という23文字を加えて

<textarea onclick="this.select();">I am a superman.</textarea>

とするだけで, 選択した際にテキストを全選択してくれるようになります.

コピペ専用テキストエリアにする

内容をコピペして使ってほしくて textarea を使う際, 編集されると困っちゃいますよね. そもそも編集できてしまうことが問題です. textarea にはそんな時に便利な readonly という属性があります.

textarea に readonly を属性として追加すると読み取り専用にしてくれます.

textarea に readonly 属性を付けて

<textarea rows="6" cols="32" readonly onclick="this.select();">
#include <stdio.h>

int main() {
    print("Hello, world!\n");
    return 0;
}
</textarea>

とすれば,

といった感じでコピペ用全選択テキストエリアを作ることができます.

エントリーにするまでもない内容ですが, 結構使う割には忘れちゃうことがあったので.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT