Comment obtenir la hauteur du texte à l'intérieur d'un textarea
J'ai un textarea
avec le texte Hello World
. Je voudrais obtenir 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 ce n'est pas donner les numéros du texte, mais la hauteur de la textarea
élément.
Vous devez vous connecter pour publier un commentaire.
Créer un élément span, réglée de innerHTML pour "Hello World".
Obtenez de l'span offsetHeight.
notez que vous devez définir la durée du style de la police de la zone de texte du style de la police.
Votre exemple ne fonctionnera JAMAIS car innerHTML et la valeur sont les deux chaînes. La chaîne ne définit pas offsetWidth.
Si vous souhaitez obtenir la hauteur du texte sélectionné à l'intérieur d'un textarea, utilisez selectionStart/selectionEnd pour trouver le texte sélectionné de la zone de texte.
<span>
à l'intérieur de la<textarea>
, droit?Range
ne va pas vous aider. Tout d'abord,Range
ne s'applique pas à la valeur des saisies de texte: il y a leselectionStart
etselectionEnd
propriétés de la textarea pour couvrir cela. Deuxièmement,Range
est sur tous les nœuds et les décalages dans les DOM et à n'importe quel type de représentation visuelle. Troisièmement,Range
n'existe pas dans IE (jusqu'à la version 9, qui ne l'avoir).élément.scrollHeight vaut probablement la peine d'enquêter.
Si j'allais à l'approche de la ce (et je n'ai pas testé ce à tous), j'avais mis le textarea de la hauteur de 1px de mesurer la hauteur de défilement, puis réinitialiser le textarea de la hauteur.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
En jQuery il n'y a pas de scrollHeight, il a donc besoin d'un peu de solution de contournement. la solution serait:
ou moins:
Vous pouvez utiliser l'élément.scrollHeight (tout comme Patrick répondu), mais il a besoin de quelques corrections (je suis à l'aide de jQuery dans l'exemple):
1) si votre textarea a rembourrage, vous devez soustraire (en haut & en bas).
2) si un élément a déjà mis en hauteur, vous devez le régler à zéro (juste pour mesurer ensuite le ramener, sinon elle renvoie cette hauteur + rembourrage)
Il n'y a pas besoin de plus de durée avec le même css que textarea.
http://www.quirksmode.org/dom/range_intro.html
désolé que je ne peux pas être de plus d'aide.
le problème avec vous, par exemple, que la de texte en ligne n'ont pas de hauteur, il a seulement une ligne de hauteur, pour qu'il ait une hauteur, il doit être dans l'affichage en mode bloc, de sorte que toutes les lignes sont ajoutées à un bloc de texte, même alors, tout dépend de la largeur de la zone et la taille de police, la police de caractères de la famille etc.
ce ItzWarty l'indique est d'obtenir la sélection de texte et de le mettre dans une div qui a la même police et la même largeur que le textarea, qui a l'affichage du bloc et vous permet d'obtenir sa hauteur.
Je ne suis pas sûr de savoir si j'interprète votre question correctement, mais personnellement, j'ai besoin de savoir le taille exacte de chaque ligne de texte. Le
line-height
bien ne pas avoir la bonne valeur (par exemple, dans Safari, il sera arrondi à la valeur la plus proche alors qu'en réalité, l'impression de texte).C'est ma solution de contournement. Vous devriez avoir le code suivant quelque part au début du document.
La variable
inputLineHeight
doit contenir la valeur correcte, en pixels.