JSでtextareaの隠れた部分を含めた高さを取得したい

Question

実現したいこと

JSでtextareaの隠れた部分を含めた高さを取得したいです。

前提

テキストエリアフォーム内に予めある情報がテキストエリア以上にあり、スクロールバーが表示している状態とします。
内部を含めると本来の高さはいくつかを調べたく、scrollHeightを取得したいです。

発生している問題・エラーメッセージ

以下の方法を利用しても取得できませんでした。

[js]
const targetAreas = document.querySelectorAll(".textarea");
console.log(targetAreas[0].scrollHeight); → 0

該当のソースコード

[html]
<textarea name="textarea" id="textarea" class="textarea" cols="30">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
</textarea>

試したこと

他の値は取得し表示できました。

console.log(targetAreas[0].cols); → 30

jsの記述なのか、htmlの記述なのか、そもそも取得できないのか、分からなくなってハマってしまいました。
どなたか分かる方いらっしゃいましたらご教授お願い致します。

Comments

[int32_t]

現在の質問文のHTMLやJavaScriptにはとくに問題は見られません。
問題を再現できるよう、完全なHTML(とくにどうやってJavaScriptを実行しているか)や再現できる環境を開示してください。

[退会済みユーザー]

以下の記事は参考になりませんか？

JavaScriptでtextareaの高さを計算して自動で可変させる方法
https://web-dev.tech/front-end/javascript/textarea-auto-height/

ハズレだったらすみません。

[Lhankor_Mhy]

当方の環境では、ご提示のコードで問題なく動作しています。0ではなかったです。

[joywont]

int32_t さん、お世話になります。
すいませんが、ほぼそのままなんです。

<textarea name="textarea" id="textarea" class="textarea" cols="30">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
</textarea>
<script>
const targetAreas = document.querySelectorAll(".textarea");
console.log(targetAreas[0].scrollHeight);
</script>

順番が違うのでしょうか？
targetAreas[0]　だけをconsole.logで表示し、デベロッパーツールで確認していくと確かに数値は確認できるのですが、targetAreas[0].scrollHeight でconsole.logで出力すると確かに0なのです。

[joywont]

Lhankor_Mhy さん、お世話になります。
リンクご紹介ありがとうございます。
しかし、既に調べたサイトでした。
元々取得が0なのでこちらは利用できませんでした。

[joywont]

Lhankor_Mhy さん、お世話になります。
そちらでは問題ないのですね、ありがとうございます。
こちらはブラウザの関係かあるのですかね？
FirefoxとChromeで見てみたのですが、同じでした。

[Lhankor_Mhy]

Firefoxで試しましたので、ブラウザに問題ではないかもしれないですね。

[joywont]

Lhankor_Mhy さん、そうなのですね。
そちらの環境では問題なく、こちらでは取得できないというのは不思議な現象ですね。
検証ありがとうございます。

[Lhankor_Mhy]

https://jsfiddle.net/Lhankor_Mhy/umbhywrk/

こちらも0になりますか？
なるのであれば環境の問題、
ならないのであれば提示されていない部分のコードの問題かと思います。

[int32_t]

Re: 17:48 のコメント
本当にそのコードだけだったら0ではない数値がコンソールに出ると思います。他の要素やスタイルシートはないんでしょうか?

なんにせよ、window.onload = () => { ... } でコードを囲むと症状が変わるかもしれませんね。

[joywont]

ちなみに、以下のような形にしてみましたら、

console.log(targetAreas[0].cols); → 30
console.log(targetAreas[0].textLength); → 664
console.log(targetAreas[0].scrollHeight); → 0
console.log(targetAreas[0].scrollWidth); → 0

とコンソールでは上記のように出力されました。なぜかscrollと付くものは0になってしまいます。
デベロッパーツールで見てみると

scrollHeight: 384
​scrollWidth: 216

と確認できるのですが。不思議ですね。

[yambejp]

ちなみに、OSやブラウザの種類やバージョンはなんでしょう？

[Lhankor_Mhy]

なんとなくですが、CSSで display:none となってるとか、そういう話のような気がしますね。

[joywont]

yambejp さん、お世話になります。

以下のようになります。

Firefox 114.0.1
Chrome 114.0.5735.134
OS Windows10

[yambejp]

Lhankor_Mhyさん
なるほど「display:none」の要素はgetComputedStyleで「auto」になるのですね。
ちょっと意識になかったです。感謝

[joywont]

Lhankor_Mhyさん、
displayをblock、Flex、Tableなど色々と試してみましたが同じく数値は0でした。

[yambejp]

TO:joywontさん
私の回答コメントにあるcodepenでも確認できませんか？

[joywont]

yambejp さん、いえ、確認させていただき、動作することを確認しました。ありがとうございます。
これでブラウザは問題ないということですよね。
色々と用意していただき感謝いたします。

[yambejp]

質問へのコメントに対してLhankor_Mhyさんがご指摘されているように
textareaの設定に問題があるのだと思います。
現状提示されているソースでは判断できないので
joywontさんもcodepenなど動作の確認できる場所にソースをあげるなど
検討ください

[joywont]

yambejp さん、ありがとうございました。
また、この症状に関して色々とお話をいただきました多くの方々にも深く感謝いたします。
お話いただきましたように、textareaあたりからまた見直してみようと思います。

Answer 1

結局解決できませんでしたのでこのままにしておきます。
いずれ解決方法が見つかればご報告したいと思います。
手伝っていただいた皆様ありがとうございました。

Answer 2

参照タイミングがおかしいだけでは？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const t = document.querySelectorAll(".textarea")[0];
  console.log(getComputedStyle(t).height);
  console.log(t.clientHeight);
  console.log(t.offsetHeight);
  console.log(t.scrollHeight);
});
</script>
<textarea id="t1" class="textarea" cols="30">

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest

</textarea>

調整

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const t = document.querySelectorAll(".textarea")[0];
  const calc=()=>{
    height.textContent=getComputedStyle(t).height;
    clientHeight.textContent=t.clientHeight;
    offsetHeight.textContent=t.offsetHeight;
    scrollHeight.textContent=t.scrollHeight;
  };
  calc();
  btn.addEventListener('click',()=>{
    console.log(1)
    t.value="\n"+"test".repeat(165)+"\n\n";
    calc();
  });
  const resizeObserver = new ResizeObserver((entries) => {
    calc();
  });
  resizeObserver.observe(t);
});
</script>
<textarea class="textarea" cols="30"></textarea>
<div>height:<span id="height"></span></div>
<div>clientHeight:<span id="clientHeight"></span></div>
<div>offsetHeight:<span id="offsetHeight"></span></div>
<div>scrollHeight:<span id="scrollHeight"></span></div>
<input type="button" value="btn" id="btn">

Comments

[joywont]

回答ありがとうございます。
頂いたソースを利用しましたところ、

auto
0
0
0

という出力となりました。
頂いたソースでもscrollHeightは取得できませんでした。

[yambejp]

調整版アップしておきました
textareaのリサイズなどでも反応ないか確認してみてください

参考
https://codepen.io/yambejp/pen/QWJyOQE

[joywont]

参考ソースありがとうございます。
先ほど自分の方に追加してみたところ、height is not defined というエラーが発生して、サンプルページのような結果が出来ませんでした。
お忙しい中用意していただきありがとうございました。

[yambejp]

> 先ほど自分の方に追加してみた

そうではなく、codepenのサイトにアクセスして数字が表示されるかどうかを聞いています
codepenはOKでご自身のサイトがダメなら、導入の仕方がおかしいのでしょう

[joywont]

> codepenのサイトにアクセスして数字が表示されるかどうかを聞いています

はい、紹介していただいたcodpenのサイトで実際に作動してることを確認させていただいてます。
そして、申し訳ございません。<div>height:<span id="height"></span></div>の設置が抜けておりました。
追加するとエラー表示はなくなりましたが、数字の表示結果はいかのようになりました。

height:auto
clientHeight:0
offsetHeight:0
scrollHeight:0