お世話になります。
textareaの文字入力に応じて高さを自動調整させるのに、ネットに公開されているこちらのコードを使わせてもらいました。
lang
1 2function resize(Tarea){ 3 var areaH = Tarea.style.height; 4 areaH = parseInt(areaH) - 54; 5 if(areaH < 40){ 6 areaH = 40; 7 } 8 Tarea.style.height = areaH + "px"; 9 Tarea.style.height = parseInt(Tarea.scrollHeight + 40) + "px"; 10 } 11 12onload = function(){ 13 var els = document.getElementsByTagName('textarea'); 14 for (var i = 0; i < els.length; i++){ 15 obj = els[i]; 16 resize(obj); 17 obj.onkeyup = function(){ resize(this); } 18 } 19} 20
しかし、あまりに長くなり過ぎるので、伸びる高さの最大値を500pxに設定してこのように加えました。
lang
1function resize(Tarea){ 2 var areaH = Tarea.style.height; 3 areaH = parseInt(areaH) - 54; 4 if(areaH < 40){ 5 areaH = 40; 6 } 7 Tarea.style.height = areaH + "px"; 8 Tarea.style.height = parseInt(Tarea.scrollHeight + 40) + "px"; 9 if(areaH >500){ 10 Tarea.style.height = 500 + "px"; 11 } 12 } 13 14onload = function(){ 15 var els = document.getElementsByTagName('textarea'); 16 var t_sh = document.getElementById('txtarea').scrollHeight; 17 if(t_sh < 500){ 18 for (var i = 0; i < els.length; i++){ 19 obj = els[i]; 20 resize(obj); 21 obj.onkeyup = function(){ resize(this); } 22 } 23 } 24}
これで、文字入力中は望むようになるのですが、追加で入力するためにカーソルを次の行に打つと同時にフォームが完全に伸びてしまいます。
これを防いで500pxのままに保つ方法ってありますでしょうか?
よろしくお願いいたします。
追記
上記記載コードはこちらを参考にさせていただきました。http://www.systemexpress.co.jp/htmlcss/resizetextarea.html
回答1件
あなたの回答
tips
プレビュー