Q&A
解決済
総合スコア38
投稿2018/08/11 11:15
編集2018/08/12 06:17textareaの高さと幅を動的に変化させるJavaScriptを作成しようとしています。
<textarea>を表示させる段階で、必要な高さと幅を計算して表示すれば、
定義範囲をはみ出さないように(オーバーフローせずに)表示できると考えたのですが、
予め決めたコンテンツの高さに余分な余白をつけた高さを、ブラウザが付加してしまい、
表示させるつもりがなかったスクロールバーが表示されてしまい、困っています。
(margin, border, paddingを0にしたとしても、です。)
文章での説明が難しいので、
実験的に以下URLにあるようなコードを作成しました。
margin, border, paddingを0にして、
コンテンツ表示域を100px、コンテンツの高さを200pxにしてわざとオーバーフローさせ、
その時のscrollHeightがいくつなのかを確認するものです。
すると、以下画像のように、ブラウザによって付加する高さが、img要素とテキスト要素によって異なるようです。
(Cope Penに対応していないためPJをダウンロードしてローカルで起動しています)
よろしくおねがいします
<textarea>の定義についてMDNの情報を調べてみたところ、
以下の内容を見つけました。
どうやら、<textarea>内にテキストをどのようにレンダリングするのかは、
ブラウザにより異なる(baselineの扱いがブラウザにより異なるという事は、テキスト1行が占有する領域の算出もブラウザにより異なる)ようです。
勝手な想像ですが、**「ScrollHeightの値もブラウザにより異なるのは、共通の仕様が無いから」**と思い始めました、、。
どなたか、この考えが正しいかどうかわかる方がいますかね、、？
とりあえずは、
「一旦<textArea>をレンダリングした後、
scrollheightを取得して<textarea>のheightより大きければ、scrollHeightの値でheightを再調整する」
という機能を組み込めば、期待通りの動作をする事はわかりましたが、
もっとスマートな方法は無いものでしょうか、、、、
回答2件
0
ベストアンサー
1. について：原因（対策はyoshinaviさんの投稿をご参照ください。）
yoshinaviさんがおっしゃっているように、<img>はインライン要素です。
このため、ベースライン＝a, b, cなどの文字の下端と、画像の下端が一致するように描画されます。
一方、ベースラインより下にもはみ出すy, jなどの文字のため、ベースラインの下にも空間があります。
この空間が、画像の下の空白となって現れています。
（参考：https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image）
ベースライン下の空白の大きさが異なるのは、（少なくとも投稿にあるCodePenでは）フォントがブラウザごとに異なり、ベースライン下の空間も大きさが異なるためです。
CSSを少し変えて、
CSS
1body { 2 border: 1px solid black; 3 font-family: Arial; 4 font-size: 20px; 5 line-height: 20px; 6}
のようにフォントなどを指定すると、ChromeとFirefoxで、画像のscrollHeightは一致しました。
2. について
文字の下の空白＝ベースライン下の空白です。これが異なるのは、1. と同様の理由です。
ただし、font-family font-size line-heightを指定しても、ChromeよりもFirefoxのscrollHeightのほうが1ピクセル大きくなりました。
この点、ブラウザ間の微妙な差、ということかと思います…。
##追記（8月12日22:40）
質問に「補足」として書かれた、
「一旦<textArea>をレンダリングした後、scrollheightを取得して<textarea>のheightより大きければ、scrollHeightの値でheightを再調整する」
この方法でコンテンツの高さ（scrollHeightで取得）とtextareaの高さを同じにするのがいいかと思います。
こんなコードでしょうか。
JavaScript
1var img = document.getElementById('imgTest'); 2var imgHeight = img.scrollHeight; 3var imgWidth = img.scrollWidth; 4img.style.height = imgHeight + 'px'; 5img.style.width = imgWidth 'px'; 6 7var txt = document.getElementById('txtAreaTest_textarea'); 8var txtHeight = txt.scrollHeight; 9var txtWidth = txt.scrollWidth; 10txt.style.height = txtHeight + 'px'; 11txt.style.width = txtWidth + 'px';
問題点は、このコードだと、
font-familyで設定した場合のみ、スクロールバーが出ます（これに気がついたときは目から汗が…）
とりあえずの対処法として思いつくのは、
txtHeight + 'px'; → txtHeight + 20 + 'px'などとしてスクロールバーの高さ・幅＋αをtextareaの高さに足すといったところでしょうか…。「いいかと思います」と言いながら申し訳ありません。
投稿2018/08/12 06:45
編集2018/08/12 13:40
総合スコア18
0
imgについては「インライン要素」なので、余白が気になるようであればdisplay:block;またはvertical-align:bottom;を追加してみてください。
テキストは、私の環境では余白は無いように見えます。
（Chrome:68.0.3440.106）
投稿2018/08/11 23:10
総合スコア3525
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/12 09:25
2018/08/12 13:02