Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

テキストエリアをフォーカスしたときに全選択状態にする

More than 3 years have passed since last update.

はじめに

以下のような使われ方のテキストエリアは、
フォーカスした瞬間に全選択にしてしまいましょう

  • コピーさせたい
  • 基本上書きする

前者は、生成されたURLやテキストを貼り付けるフォームなど
後者は、入力フォームなど

方法

テキストエリアをフォーカスしたときに全選択状態にする①
$(document).ready(function(){
    $('#text').focus(function(){
        $(this).select();
    });
});

HTML内の<input type="text">全てにこの設定が適用されます

テキストエリアをフォーカスしたときに全選択状態にする②
$(document).ready(function(){
    $('#text2')
        .focus(function(){
          $(this).select();
      })
      .click(function(){
          $(this).select();
          return false;
      });
}); 

こちらは、フォーカスだけでなく、
clickイベントでも全選択状態になるような仕様です
テキストエリア内でクリックを繰り返すと、全選択と選択解除を繰り返します

さいごに

この仕様を実装したいと思ったのは、
IE10以降で実装された、input要素の「×」ボタンについて考えたときでした。

ブラウザによってついてたりついてなかったりすると、なんか不便。
でも、全消しするとき×ボタンがないとないで不便。
同じ手間で消せるor上書きできるようにしたいと考えて辿りついたのがこれです。

フォーカスした瞬間に全選択してしまえば、
BackSpaceで消せるしすぐに上書きもできるので便利!
途中に文字を挿入したいときには不便ですけどね。

参考

Javascriptで実装したい人向け

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away