読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery | テキストエリアにフォーカスを当てて、文字列全部を選択する

<スポンサーリンク>

目次

日記

何かを生成した時に、ユーザにいちいちテキストエリアにフォーカスを当てさせて、Ctrl+Cを押させるのは不便だと思いました。
それで、とりあえず生成したHTMLは自動で選択されるようにしました。

イメージとしては、下の画像の「HTMLを生成する」でポチッとHTMLを生成したら、下の作成されたHTMLが全部選択されるようにするイメージですね。

f:id:sho322:20140718014802j:plain

Google Mapの埋め込みの時とかも、こうやって選択されるから、自分もやってみたいと思ったんです。

テキストエリアにフォーカスを当てて文字列を選択

で、実装していて少しハマったのは、jQueryのfocus()がうまく機能しなくて、フォーカスが当たらなかったこと。

要は、jQueryの公式のサイトにある
フォーカス時に全選択状態になるテキストエリアを作る
のやり方だけではうまくいかなかった。

で、StackOverFlowにこんな回答があったんですが。
http://stackoverflow.com/questions/11380392/the-focus-method-in-jquery-doesnt-work

おそらく、テキストエリア内にHTMLを書き込んだ時にblurの状態、つまり、フォーカスを失った状態になってしまったと。

なので、このStackOverFlowに従って、setTimeoutを使いました。

//結果を書き込む
var result = $("#result").html(html);

setTimeout(function() {
  result.focus();
},0);
result.select();

テキストエリアのHTMLはこうです。

<textarea id="result" class="form-control" rows="12"></textarea>

こうすると、HTMLを書き込んだ後に、書き込んだHTML全部を選択した状態にすることができます。


その他調べたことのまとめ

JavaScriptの空文字の判定
http://jehupc.exblog.jp/19188737

JavaScriptのundefinedの判定
http://blog.tojiru.net/article/205007468.html

textareaに書き込む方法
http://stackoverflow.com/questions/4343923/write-inside-text-area-with-javascript

などですね。

jQuery入門道場

jQuery入門道場