Come ottenere il numero di righe in <textarea > utilizzando JavaScript?

Question

Ho un elemento <textarea>. Posso usare JavaScript per rilevare che ci sono (per esempio) 10 righe di testo al suo interno?

Answer 1

È possibile accedere al campo tramite DOM Javascript e contare semplicemente il numero di caratteri di nuova riga.

oArea = document.getElementById('myTextField'); 
var aNewlines = oArea.value.split("\n"); 
var iNewlineCount = aNewlines.length(); 

Answer 2

Bene, ho trovato un modo molto più semplice per farlo, ma è necessario impostare l'altezza della riga dell'area di testo nel CSS. Ho provato a leggere l'altezza della riga all'interno dello script ta.style.lineHeight ma non sembra che restituisca un valore.

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> 

Script

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"); 

---

Update: Grazie per @Pebbl per lavorare fuori gli insetti, questo è il codice necessario per ottenere l'altezza del contenuto del testo (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); 
} 

Answer 3

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; 
    } 

Questo è un semplice e testati uno

Answer 4

linea Just uno js:

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