javascript - ejemplo - Limite el número de líneas en textarea y visualice el recuento de líneas usando jQuery

textarea width

Question

Usando jQuery me gustaría:

• Limite el número de líneas que un usuario puede ingresar en un área de texto a un número establecido
• Tener un contador de línea que actualiza el número de líneas a medida que se ingresan las líneas
• La tecla de retorno o / n contaría como línea

Felicitaciones a cualquiera que pueda ayudar!

$(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>

Para este ejemplo, digamos limitar el número de líneas permitidas a 10.

¡Gracias a todos!

Answer 1

Un ejemplo muy feo, pero de alguna manera funcional, especifica filas de textarea

<textarea rows="3"></textarea>

y luego en js

 $("textarea").on(''keydown keypress keyup'',function(e){
if(e.keyCode == 8 || e.keyCode == 46){
return true;
}
var maxRowCount = $(this).attr("rows") || 2;
var lineCount = $(this).val().split(''/n'').length;
if(e.keyCode == 13){
if(lineCount == maxRowCount){
return false;
}
}
var jsElement = $(this)[0];
if(jsElement.clientHeight < jsElement.scrollHeight){
var text = $(this).val();
text= text.slice(0, -1);
$(this).val(text);
return false;
}
});

Answer 2

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'', '''');
}
});
});

violín: http://jsfiddle.net/XNCkH/17/