公開日: 2010年10月21日(Thu)
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やiPad、たぶんAndroid系の端末でもそうだが、テキストエリアで長文編集するのがとんでもなく面倒。テキストエリア内でのスクロールが必要になったときに、テキストエリアを長押しして、下へぐーーっと引っ張る操作をするが、これが気が遠くなるほど遅い。
テキストエリアのサイズが内容量に合わせて大きくなってくれたら、ページ自体をスクロールして編集したい箇所へ移動できるので、操作性は著しく向上するに違いない。
ちなみに、このサンプルソースにはブラウザ分岐は入っていないので、iPhoneやAndroid向けだけに提供したい場合は、条件分岐を足す必要がある。
公開日: 2010年10月21日(Thu)
