textareaのサイズを入力にあわせて調整
なかなか便利なtextareaのサイズを入力にあわせて調整するJavaScript。
イラストdeブログ開発記さんと404 Blog Not Foundさんで紹介されています。
textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記)
function textareaResize(event) { try { elem_id = event.srcElement.id; } catch ( e ) { elem_id = event.target.id; } var keycode = event.keyCode; if (keycode == 13) { var m = document.getElementById(elem_id); var r = m.getAttribute("rows"); m.setAttribute("rows", parseInt(r)+1); } }
javascript - 勝手に添削 - textareaの高さを自動調節(404 Blog Not Found)
function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var lines = 1; for (var i = 0, l = value.length; i < l; i++){ if (value.charAt(i) == '\n') lines++; } textarea.setAttribute("rows", lines); // window.status = lines; }
ということで、自分でも勝手にコードを変更してみました。
一応コード量削減を目的に正規表現を利用して作ってみました。
処理速度とかは考慮していないので、上記の2つのコードに劣るかもしれません。
//自分でコード行数を勝手に削減版 function resize_textarea(ev){ var textarea = ev.target || ev.srcElement; var match = textarea.value.match(/\n/g); textarea.setAttribute("rows", ( match ? match.length : 0 )); }