Using jQuery I would like to:
$(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.
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/
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; } });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With