Comment obtenir le nombre de lignes dans <textarea > à l'aide de JavaScript?
J'ai un <textarea>
élément. Puis-je utiliser JavaScript pour détecter qu'il y a (par exemple) 10 lignes de texte?
- Vous pourriez préciser votre question afin de ne pas ressembler à vous essayez de renvoyer le
rows=
attribut de latextarea
élément. - Pourquoi voudriez-vous faire cela? Je sens une mauvaise spécification des exigences.
Vous devez vous connecter pour publier un commentaire.
Bien je l'ai trouvé beaucoup plus simple façon de le faire, mais vous aurez besoin de définir la hauteur de la ligne du textarea dans le CSS. J'ai essayé de lire la ligne de hauteur à l'intérieur du script
ta.style.lineHeight
mais il ne semble pas renvoyer une valeur.CSS
HTML
Script
Mise à jour: Merci à @Pebbl pour travailler sur les bugs, c'est le code nécessaire pour obtenir la hauteur du contenu du texte (démo)
rows=1
, ou bien sonscrollHeight
peut être artificiellement élevé..style
objet ne jamais revenir styles en ligne. Pour obtenir la valeur calculée, vous devez utiliserwindow.getComputedStyle
et de secours deElm.currentStyle
pour les vieux IE. Autres que que +1 🙂numberOfLines
calcul de l'aideMath.ceil()
au lieu de plancher. J'ai mis à jour ma réponse; merci encore pour votre aide 🙂while (ta.offsetHeight >= ta.scrollHeight) { ta.style.height = (height -= scanAmount)+'px'; }
? ta.offsetHeight est inchangé par la boucle, de sorte que la boucle continue pour toujours, non?scanAmount
à zéro, et il ne devrait pas arriver.(height++)+'px'
doivent être remplacées par des(++height)+'px'
Juste un js ligne:
En supposant que vous savez la hauteur de la ligne, de la façon la plus simple de le faire serait:
L'astuce ici est de définir la hauteur de
auto
premier. Ensuite, lorsque vous accédez à scrollHeight le navigateur va faire la mise en page et revenir à la bonne hauteur, y compris toute la ligne continue. Puis restaurer le textarea de la hauteur à sa valeur d'origine et de retourner le résultat.Vous pouvez accéder au domaine via Javascript, DOM et de simplement compter le nombre de caractères de saut de ligne.
c'est un simple et testé une
Vous pouvez obtenir le texte de la hauteur de Élément
.scrollHeight
, mais pour obtenir la bonne hauteur, il y a un parchemin, ce qui signifie que vous pouvez activer temporairement la hauteur de zone de texte à0
, jusqu'à ce que vous obtenir le défilement valeur de la hauteur puis restaurer le CSS hauteur.Celui que vous avez fait cela, vous calculez le nombre de lignes en fonction de la CSS line-height valeur de la propriété (1 ligne de texte contribue à
getComputedStyle(réf.).lineHeight
pixels), quelque chose comme...Remarque: vos éléments doivent être présents dans les DOM afin d'obtenir le scrollHeight, lineHeight les hauteurs. Si n'est pas déjà présent, les ajouter, calculer les valeurs, puis les retirer de la DOM.