web-dev-qa-db-fra.com

Comment obtenir le nombre de lignes dans <textarea> en utilisant JavaScript?

J'ai un élément <textarea>. Puis-je utiliser JavaScript pour détecter qu'il contient (par exemple) 10 lignes de texte?

javascripthtmltextarea
23
Mask

Eh bien, j’ai trouvé un moyen beaucoup plus simple de le faire, mais vous devrez définir la hauteur de ligne de la zone de texte dans le fichier CSS. J'ai essayé de lire la hauteur de ligne à l'intérieur du script ta.style.lineHeight mais cela ne semble pas renvoyer de valeur.

CSS

#ta { width: 300px; line-height: 20px; }

HTML

<textarea id="ta">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>

Scénario

 var taLineHeight = 20; // This should match the line-height in the CSS
 var taHeight = ta.scrollHeight; // Get the scroll height of the textarea
 ta.style.height = taHeight; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
 var numberOfLines = Math.floor(taHeight/taLineHeight);
 alert( "there are " + numberOfLines + " lines in the text area");

Mise à jour: Merci à @Pebbl d’avoir corrigé les bugs, c’est le code nécessaire pour obtenir la hauteur du contenu du texte ( demo )

var calculateContentHeight = function( ta, scanAmount ) {
    var origHeight = ta.style.height,
        height = ta.offsetHeight,
        scrollHeight = ta.scrollHeight,
        overflow = ta.style.overflow;
    /// only bother if the ta is bigger than content
    if ( height >= scrollHeight ) {
        /// check that our browser supports changing dimension
        /// calculations mid-way through a function call...
        ta.style.height = (height + scanAmount) + 'px';
        /// because the scrollbar can cause calculation problems
        ta.style.overflow = 'hidden';
        /// by checking that scrollHeight has updated
        if ( scrollHeight < ta.scrollHeight ) {
            /// now try and scan the ta's height downwards
            /// until scrollHeight becomes larger than height
            while (ta.offsetHeight >= ta.scrollHeight) {
                ta.style.height = (height -= scanAmount)+'px';
            }
            /// be more specific to get the exact height
            while (ta.offsetHeight < ta.scrollHeight) {
                ta.style.height = (height++)+'px';
            }
            /// reset the ta back to it's original height
            ta.style.height = origHeight;
            /// put the overflow back
            ta.style.overflow = overflow;
            return height;
        }
    } else {
        return scrollHeight;
    }
}

var calculateHeight = function() {
    var ta = document.getElementById("ta"),
        style = (window.getComputedStyle) ?
            window.getComputedStyle(ta) : ta.currentStyle,

        // This will get the line-height only if it is set in the css,
        // otherwise it's "normal"
        taLineHeight = parseInt(style.lineHeight, 10),
        // Get the scroll height of the textarea
        taHeight = calculateContentHeight(ta, taLineHeight),
        // calculate the number of lines
        numberOfLines = Math.ceil(taHeight / taLineHeight);

    document.getElementById("lines").innerHTML = "there are " +
        numberOfLines + " lines in the text area";
};

calculateHeight();
if (ta.addEventListener) {
    ta.addEventListener("mouseup", calculateHeight, false);
    ta.addEventListener("keyup", calculateHeight, false);
} else if (ta.attachEvent) { // IE
    ta.attachEvent("onmouseup", calculateHeight);
    ta.attachEvent("onkeyup", calculateHeight);
}
35
Mottie

En supposant que vous connaissiez la hauteur de ligne, le moyen le plus simple de procéder est:

function numOfLines(textArea, lineHeight) {
    var h0 = textArea.style.height;
    ta.style.height = 'auto';
    var h1 = textArea.scrollHeight;
    textArea.style.height = h0;
    return Math.ceil(h1 / lineHeight);
}

Le truc ici consiste à régler la hauteur sur auto en premier. Ensuite, lorsque vous accédez à scrollHigh, le navigateur effectue la mise en page et renvoie la hauteur correcte, y compris les retours à la ligne. Ensuite, restaurez la hauteur initiale de textarea à sa valeur d'origine et renvoyez le résultat.

2
goblin

Juste une ligne js:

var rows = document.querySelector('textarea').value.split("\n").length;
2
Ionut Bajescu

Vous pouvez obtenir la hauteur réelle du texte à partir de Element.scrollHeight , mais pour obtenir la hauteur correcte, il faut un défilement, ce qui signifie que vous pouvez définir temporairement la hauteur de la zone de texte sur 0, jusqu'à ce que vous obteniez la valeur de hauteur de défilement puis la restauration. sauvegarder la hauteur CSS.

Par exemple, vous calculez le nombre de lignes en fonction de la valeur de la propriété CSS line-height (1 ligne de texte contribue à getComputedStyle(ref).lineHeight pixels), comme ...

function getTextareaNumberOfLines(textarea) {
    var previous_height = textarea.style.height, lines
    textarea.style.height = 0
    lines = parseInt( textarea.scrollHeight/parseInt(getComputedStyle(textarea).lineHeight) )
    textarea.style.height = previous_height
    return lines
}

Remarque: vos éléments doivent être présents dans le DOM pour obtenir les hauteurs scrollHeight, lineHeight, etc. S'il n'est pas déjà présent, ajoutez-les, calculez les valeurs, puis supprimez-les du DOM.

0
Samuel Elh

Vous pouvez accéder au champ via Javascript DOM et compter simplement le nombre de caractères de nouvelle ligne.

oArea = document.getElementById('myTextField');
var aNewlines = oArea.value.split("\n");
var iNewlineCount = aNewlines.length();
0
webguydan
    function countLines(area,maxlength) {
       // var area = document.getElementById("texta")
        // trim trailing return char if exists
        var text = area.value.replace(/\s+$/g, "")
        var split = text.split("\n")
        if (split.length > maxlength) {
            split = split.slice(0, maxlength);
            area.value = split.join('\n');
            alert("You can not enter more than "+maxlength.toString()+" lines");
        }
        return false;
    }

ceci est simple et testé

0
anoop