Javascriptで改行したら下に伸びるテキストボックスをつくる

#はじめに

読んで字の通り、可変テキストボックスを実装する関数をつくってみました。
改行するごとに下へ下へと枠が伸びてゆくので、見栄えはよくなるかも。

#コード
仕組みとしては、改行文字（\n）の数を数えて、改行文字 ✕ 一行分の高さ ＋ もともとの高さ　となるようにした感じ。
パソコンは改行そのものも「改行という名の文字」として認識しているので、そこを突いてやればいいというわけだ。

なお、CSSは適用されているスタイルをブラウザから自動取得してくる仕組みになっている。
わざわざJsを書き換えてやらずとも、使いまわすことができるというわけだ。

javascript

function afeed(element){
	if(element.tagName == 'TEXTAREA'){

		// 行の高さとpadding値を取得する。IEやSafariなど、ブラウザによって必要な関数が異なるので、or（||）で３パターン分取れるようにしてある。
		var stylelists = window.getComputedStyle(element, null) || element.currentStyle || document.defaultView.getComputedStyle(element, '');

		// １行あたりの高さ。
		if(stylelists.getPropertyValue('line-height') === "normal"){
			var line_height = 1.2 * stylelists.getPropertyValue('font-size').replace(/px/g , "");
		}else if(Number.isNaN(stylelists.getPropertyValue('line-height'))){
			var line_height = stylelists.getPropertyValue('line-height').replace(/px/g , "");
		}else{
			console.log("エラー！line-heightが不正な値です。");
		}

		// 高さの初期値。
		var firstheight = Number(element.offsetHeight) - stylelists.getPropertyValue('padding-top').replace(/px/g , "") - stylelists.getPropertyValue('padding-top').replace(/px/g , "");


		element.style.height = firstheight + 'px';
		element.style.resize = 'none';

		var line_length;
		var result_height;
		element.addEventListener('input', function(){

			// 改行文字の個数を取得
			if(element.value.match(/\n/g) === null){
				line_length = 0;
			}else{
				line_length = element.value.match(/\n/g).length;
			}

			// 見栄えの関係上、１つ以上改行があるときは文字のすぐ下に枠が来るようにする
			if(line_length === 0){
				result_height = firstheight;
			}else{
				result_height = ((line_length - 1) * line_height) + firstheight;
			}
			element.style.height = result_height + 'px';
		}, false);
	}else{
		console.log('Error: テキストエリアでないものに対して適用されています。');
	}
}

#Codepenを用いたサンプル

See the Pen テキストエリア自動改行 by Yomogenium (@yomogenium) on CodePen.

#おわりに

間違いやわかりにくい箇所ありましたら、編集リクエストをお願いいたします。

#参考文献