HTML TextArea Begrenzung der Zeilenanzahl

Question

Ich hätte gerne ein Textfeld, in dem Benutzer maximal 255 Ziffern und 5 Zeilen Text eingeben können. Dann, wenn sie auf den "Post" -Button klicken, wird der Text an eine andere PHP-Datei gesendet. Der Text wird an die zweite PHP-Datei gesendet und das Limit von 255 Ziffern funktioniert (maxlength = "255"), aber ich kann die Grenze für Zeilen nicht bekommen. Ich habe es gegooglet, das Forum durchforstet und mehrere Dinge ausprobiert, aber nichts funktioniert. Dies ist eines der Dinge, die ich ausprobiert habe.

<script> 
$(document).ready(function() { 
$('textarea[name=message]').on('keypress', function (event) { 
var textarea = $(this), 
    numberOfLines = (textarea.val().match(/\n/g) || []).length + 1, 
    maxRows = 5; 

if (event.which === 13 && numberOfLines === maxRows) { 
    return false; 
} 
}); 
}); 
</script> 
<textarea name="message" placeholder="What's on your mind?" maxlength="255" data-limit-rows=true></textarea> 

<input type="submit" value="Post"> 
</form> 

Dank

Answer 1

Die Anzahl der Textzeilen in einem Behälter ist in der Regel von den Abmessungen des Behälters abhängig. Daher benötigen Sie zuerst einige Informationen über den Text im Textbereich.

Wir können annehmen, dass ein Zeichen die Höhe einer Zeile im Textfeld ist. Dies hängt natürlich auch von der Schriftgröße und der Schriftfamilie der Zeichen im Textfeld ab. Sobald wir diese Dimensionen erhalten haben, können wir prüfen, wie viele Zeilen im Textfeld eingegeben wurden. Leider müssen wir etwas davon replizieren, indem wir ein div mit der gleichen Breite wie das Textfeld verwenden, um diese Zahlen zu überprüfen.

var textarea = document.getElementById('userinput'); 
 
var button = document.getElementById('checklines'); 
 

 
button.onclick = function(){ 
 
    var temp = document.createElement('div'); 
 
    temp.style.width = textarea.clientWidth + 'px'; 
 
    var style = window.getComputedStyle(textarea) 
 
    temp.style.fontFamily = style.getPropertyValue("font-family"); 
 
    temp.style.fontSize = style.getPropertyValue("font-size"); 
 
    temp.textContent = 'X'; 
 
    document.body.appendChild(temp); 
 
    var unit = temp.clientHeight; // height of one line 
 
    temp.textContent = textarea.value; 
 
    var lines = temp.clientHeight/unit; 
 
    console.log(lines); 
 
    temp.outerHTML = ''; 
 
}

<textarea id="userinput"></textarea> 
 
<button id="checklines">Check Lines</button>