Limit number of lines in textarea and Display line count using jQuery
63,432
Solution 1
html:
<textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>
js:
$(document).ready(function(){
var lines = 10;
var linesUsed = $('#linesUsed');
$('#countMe').keydown(function(e) {
newLines = $(this).val().split("\n").length;
linesUsed.text(newLines);
if(e.keyCode == 13 && newLines >= lines) {
linesUsed.css('color', 'red');
return false;
}
else {
linesUsed.css('color', '');
}
});
});
fiddle: http://jsfiddle.net/XNCkH/17/
Solution 2
Here is little improved code. In previous example you could paste text with more lines that you want.
HTML
<textarea data-max="10"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span></div>
JS
jQuery('document').on('keyup change', 'textarea', function(e){
var maxLines = jQuery(this).attr('data-max');
newLines = $(this).val().split("\n").length;
console.log($(this).val().split("\n"));
if(newLines >= maxLines) {
lines = $(this).val().split("\n").slice(0, maxLines);
var newValue = lines.join("\n");
$(this).val(newValue);
$("#linesUsed").html(newLines);
return false;
}
});
Solution 3
For React functional component that sets new value into state and forwards it also to props:
const { onTextChanged, numberOfLines, maxLength } = props;
const textAreaOnChange = useCallback((newValue) => {
let text = newValue;
if (maxLength && text.length > maxLength) return
if (numberOfLines) text = text.split('\n').slice(0, numberOfLines ?? undefined)
setTextAreaValue(text); onTextChanged(text)
}, [numberOfLines, maxLength])
Author by
chainwork
Updated on August 16, 2021Comments
-
chainwork almost 3 years
Using jQuery I would like to:
- Limit the number of lines a user can enter in a textarea to a set number
- Have a line counter appear that updates number of lines as lines are entered
- Return key or \n would count as line
$(document).ready(function(){ $('#countMe').keydown(function(event) { // If number of lines is > X (specified by me) return false // Count number of lines/update as user enters them turn red if over limit. }); }); <form class="lineCount"> <textarea id="countMe" cols="30" rows="5"></textarea><br> <input type="submit" value="Test Me"> </form> <div class="theCount">Lines used = X (updates as lines entered)<div>
For this example lets say limit the number of lines allowed to 10.