web-dev-qa-db-fra.com

Comment obtenir la hauteur du texte à l'intérieur d'une zone de texte

J'ai un textarea avec le texte Hello World. Je voudrais avoir la hauteur de ce texte.

J'ai essayé d'utiliser:

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

et:

var textHeight = element.value.offsetHeight;

Mais ceux-ci ne donnent pas les numéros du texte, mais la hauteur de l'élément textarea.

javascripttextareainnerhtml
30
Adam

Créez un élément span, définissez innerHTML de Span sur "Hello World".
Obtenez la valeur offsetHeight de la plage.

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

notez que vous devez définir le style de police de la plage sur le style de police de la zone de texte.

Votre exemple ne fonctionnera JAMAIS car innerHTML et value sont tous deux des chaînes. La chaîne ne définit pas offsetWidth.

Si vous souhaitez obtenir la hauteur du texte sélectionné à l'intérieur d'une zone de texte, utilisez selectionStart/selectionEnd pour trouver le texte sélectionné de la zone de texte.

18
Warty

element.scrollHeight mérite probablement d'être étudié.

Si j'allais aborder cela (et je ne l'ai pas testé du tout), je définirais la hauteur de la zone de texte à 1px mesurer la hauteur de défilement, puis réinitialiser la hauteur de la zone de texte.

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

16
edeverett

Dans jQuery, il n'y a pas de scrollHeight, il a donc besoin d'une petite solution de contournement. la solution serait:

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

ou plus court:

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

Vous pouvez utiliser element.scrollHeight (tout comme Patrick a répondu) mais il a besoin de quelques corrections (j'utilise jQuery dans l'exemple):

1) si votre zone de texte a un remplissage, vous devez le soustraire (en haut et en bas).

2) si l'élément a déjà défini la hauteur, vous devez le mettre à zéro (juste pour la mesure puis le remettre, sinon il retourne cette hauteur + rembourrage)

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)

Il n'y a pas besoin d'étendue supplémentaire avec le même CSS que textarea.

3
Dawe