web-dev-qa-db-ja.com

textarea内のテキストの高さを取得する方法

textareaがあり、テキストHello World。このテキストの高さを知りたいのですが。

私は使用しようとしました：

var element = document.getElementById('textarea');
var textHeight = element.innerHTML.offsetHeight;

そして：

var textHeight = element.value.offsetHeight;

しかし、これらはテキストの数を与えるのではなく、textarea要素の高さを与えます。

javascripttextareainnerhtml
30
Adam

Span要素を作成し、SpanのinnerHTMLを "Hello World"に設定します。
スパンのoffsetHeightを取得します。

var span = document.createElement("span");
span.innerHTML="Hello World"; //or whatever string you want.
span.offsetHeight // this is the answer

スパンのフォントスタイルをテキストエリアのフォントスタイルに設定する必要があることに注意してください。

InnerHTMLとvalueはどちらも文字列であるため、この例は機能しません。文字列はoffsetWidthを定義しません。

Textarea内の選択されたテキストの高さを取得したい場合は、selectionStart/selectionEndを使用して、textareaの選択されたテキストを検索します。

18
Warty

element.scrollHeightはおそらく調査する価値があります。

これに近づくつもりだった場合（これをまったくテストしなかった場合）、textareaの高さを1pxに設定してスクロールの高さを測定し、textareaの高さをリセットします。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

16
edeverett

JQueryにはscrollHeightがないため、少し回避策が必要です。解決策は次のとおりです。

var areaheight=$("textarea#element")[0].scrollHeight;
$("#element").height(areaheight);

以下：

$("#element").height($("#element")[0].scrollHeight)
6
patrick

Element.scrollHeightを使用できますが（Patrickが回答したように）、いくつかの修正が必要です（例ではjQueryを使用しています）。

1）テキストエリアにパディングがある場合、それを減算する必要があります（上と下）。

2）要素がすでに高さを設定している場合は、それをゼロに設定する必要があります（測定のために設定し直してください。それ以外の場合は、この高さ+パディングを返します）

var h0 = $(element).height();  // backup height
$(this).height(0); 
var h = $(this).get(0).scrollHeight - $(this).css('paddingTop').replace('px','')*1 - $(this).css('paddingBottom').replace('px','')*1; // actual text height
$(this).height(h0); // set back original height (or new height using h)

Textareaと同じcssを持つ追加のスパンは必要ありません。

3
Dawe