質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1316閲覧

textareaの高さ自動調整を条件によって停止するには

mari.rinn

総合スコア296

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/04/16 05:29

編集2018/04/16 06:52

お世話になります。
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/04/16 05:55

「ネットに公開されているコード」の公開先を参考にされているのであれば「調べたこと」になりますので、念のためそちらの参考先URLを質問に追記しておいてください。
m.ts10806

2018/04/16 06:41

既にベストアンサーがついているので質問を編集するのは良くないのですが、「質問に追記しておいてください」と依頼しているので、質問本文を編集して追記してください(既にベストアンサーがついているので次回以降で構いません)
mari.rinn

2018/04/16 06:54

申し訳ありません。書く所を間違えてしまいましたので、今しがた質問文の方に追記しました。お手数おかけしました。ありがとうございました。
guest

回答1

0

ベストアンサー

max-heightを指定すれば良かろうと思います.

HTML

1<textarea id="ta" style="height: 1em; max-height:100px;"></textarea> 2<script> 3ta.oninput = e => { 4 const ta = e.target; 5 ta.style.height = "0"; 6 ta.style.height = ta.scrollHeight + "px"; 7} 8</script>

https://developer.mozilla.org/ja/docs/Web/CSS/max-height

投稿2018/04/16 05:45

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mari.rinn

2018/04/16 06:31 編集

defghi1977様 早速にご回答ありがとうございます!! やってみたら、すんなりと出来ました。 ちなみに、jvascriptの方は、質問に記載したまま(上部の自分での変更前)で、 styleにmax-height:500px; だけの追加で出来ました。 こんなに簡単なことだったとは。。。です。 ほんとにどうもありがとうございました~~!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問