Xlune::Blog

あったらあったでいいレベル

テキストエリアの動的な調整は、マウスでドラッグするやつも含めると、チラホラ見るようになってきた。
ユーザ視点においては、無いと困るというレベルではなく、あれば便利というもの。

下記のような記事を見たので、自分も自分なりにちゃんとストックしておこうと思った。

textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記)
javascript - 勝手に添削 - textareaの高さを自動調節 (404 Blog Not Found)

追記：
実際にこういう機能が欲しい場合は、jQueryとjQueryプラグイン使った方がラクチン。

さくっとサンプル

へ る ぷ み ｜

JavaScript コード

/* setup */
var FormUtil = FormUtil || {} ;
FormUtil.TextArea = FormUtil.TextArea || {} ;

/* config */
FormUtil.TextArea.conf = {
	resizeClass: "auto-resize",
	resizeMin: 1,
	resizeMax: 30
};

/* resize func */
FormUtil.TextArea.autoResize = function(e){
	var conf = FormUtil.TextArea.conf;
	var textarea = e.target || e.srcElement || e;
	var rowCount = textarea.value.split("\n").length;
	rowCount = Math.min(conf.resizeMax, Math.max(conf.resizeMin, rowCount));
	textarea.setAttribute("rows", rowCount);
};

/* init event */
FormUtil.TextArea.init = function(e){
	var textarea = document.getElementsByTagName("textarea");
	var className = FormUtil.TextArea.conf.resizeClass;
	var regex = new RegExp("(^|\\s+)" + className + "($|\\s+)");
	for(var i=0,max=textarea.length;i<max;i++){
		var tmp = textarea.item(i);
		if(!(tmp.getAttribute("class") || tmp.getAttribute("className") || "").match(regex)) continue;
		if(window.addEventListener){
			tmp.addEventListener("keyup", FormUtil.TextArea.autoResize, false);
		} else if (window.attachEvent) {
			tmp.attachEvent("onkeyup", FormUtil.TextArea.autoResize);
		}
		FormUtil.TextArea.autoResize(tmp);
	}
}

/* onload event */
if(window.addEventListener) {
	window.addEventListener("load", FormUtil.TextArea.init, false);
} else if (window.attachEvent) {
	window.attachEvent("onload", FormUtil.TextArea.init);
}

"FormUtil"ってのを持ってるわけではない、これを期にフォーム関連の細かいコードを整理しようと思っただけ。
追記：scrollHeightとか読んでwrapにも対応したほうがいいよね。

まとめ

自分がJavaScriptを書くと、何か冗長な感じになってしまう。
もっと良い書き方を覚えたいので、質のいいライブラリでもながめよう、放置の可能性が高いが。。。