【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向けだけに提供したい場合は、条件分岐を足す必要がある。


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

ページの先頭へ戻る