【JavaScript】 <textarea>の高さを自動調整するスクリプト。

画面サンプル

HTMLのフォーム要素のうち、複数行入力欄 <textarea> で、編集したテキストの量にあわせて高さを自動調整するスクリプトを作ってみた。

実装サンプル

いきなりだけど、完成したソースから。
実装サンプルは下記。

<script type="text/javascript">
function PxTextareaAdjuster( textarea ){
  var textarea = textarea;
  textarea.style.overflow='hidden';
  var defaultHeight = textarea.offsetHeight;
  function adjustTa(){
    textarea.style.height = defaultHeight+'px';
    var tmp_sh = textarea.scrollHeight;
    while( tmp_sh > textarea.scrollHeight ){
      tmp_sh = textarea.scrollHeight;
      textarea.scrollHeight ++;
    }
    if( textarea.scrollHeight > textarea.offsetHeight ){
      textarea.style.height = textarea.scrollHeight+'px';
    }
  }
  function resetTa(){
    textarea.scrollTop = 0;
    textarea.style.height = defaultHeight+'px';
  }
  textarea.onfocus  = function(){ adjustTa(); }
  textarea.onkeyup  = function(){ adjustTa(); }
  textarea.onchange = function(){ adjustTa(); resetTa(); }
  textarea.onblur   = function(){ adjustTa(); resetTa(); }
}//PxTextareaAdjuster()
</script>

<textarea id="test">これを編集してみてください。</textarea>
<script type="text/javascript">
window.onload = function(){
  var obj = new PxTextareaAdjuster(
    document.getElementById('test')
  );
}
</script>

この実装では、PxTextareaAdjuster() という function に関連機能をまとめた。
window.onload イベント発生時に、PxTextareaAdjuster() のインスタンスを生成している。コンストラクタの第1引数に実施対象となるtextareaエレメントを渡す仕様。

動作

動作は単純で、テキストエリアの編集内容量に合わせてテキストエリア自体のサイズを自動調整する。編集が終わったら、もとの大きさに戻す処理も入れてみた。

動作を確認した環境は下記。

Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Firefox 3.6.11
Safari 5.0
Google Chrome 7.0.517.41
Opera 10.62
iPhone 3GS (iOS4) Mobile Safari

iPhone向けに重宝するかも

iPhoneやiPad、たぶんAndroid系の端末でもそうだが、テキストエリアで長文編集するのがとんでもなく面倒。テキストエリア内でのスクロールが必要になったときに、テキストエリアを長押しして、下へぐーーっと引っ張る操作をするが、これが気が遠くなるほど遅い。

テキストエリアのサイズが内容量に合わせて大きくなってくれたら、ページ自体をスクロールして編集したい箇所へ移動できるので、操作性は著しく向上するに違いない。

ちなみに、このサンプルソースにはブラウザ分岐は入っていないので、iPhoneやAndroid向けだけに提供したい場合は、条件分岐を足す必要がある。


プロフィール

コヤナギ トモヤ

まったりウェブ系コーダーしてます。PHP製静的CMS Pickles 2 を開発しています。

RSSフィード

  • このサイトは、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る