Textarea with limited limits and char limits

Question

I need the functionality that TextArea will have with

1) maximum total lines- 6 and 2) in each line there must be maximum of 16 chars 3) if user enters 17th character the cursor should go to the next line and user will type in there (the line will be counted) 4) if user reaches to the 7th line it will not allow user to write 5) if user type eg "Hello, I Love StackOverflow and its features" (counting from 1st Char 'H', the 16th char is 't' but it is whole word 'StackOverflow', it shouldn't break and continue to next line eg Hello, I Love St ackOverflow now the whole word should come to next line like: Hello, I Love StackOverflow and its features 

here is the link that i have done so far http://jsfiddle.net/nqjQ2/2/

sometimes some functions work, sometimes not, and run into browser issues for onKeyUp and onKeyDown can anyone help me with this?

Answer 1

I think this is basically what you want:

 <textarea id="splitLines"></textarea> 

JavaScript:

 var textarea = document.getElementById("splitLines"); textarea.onkeyup = function() { var lines = textarea.value.split("\n"); for (var i = 0; i < lines.length; i++) { if (lines[i].length <= 16) continue; var j = 0; space = 16; while (j++ <= 16) { if (lines[i].charAt(j) === " ") space = j; } lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || ""); lines[i] = lines[i].substring(0, space); } textarea.value = lines.slice(0, 6).join("\n"); }; 

See the violin in action .

Answer 2

In jquery

 $(function () { var limit = function (event) { var linha = $(this).attr("limit").split(",")[0]; var coluna = $(this).attr("limit").split(",")[1]; var array = $(this) .val() .split("\n"); $.each(array, function (i, value) { array[i] = value.slice(0, linha); }); if (array.length >= coluna) { array = array.slice(0, coluna); } $(this).val(array.join("\n")) } $("textarea[limit]") .keydown(limit) .keyup(limit); }) <textarea limit='10,5' cols=10 rows=5 ></textarea> 

http://jsfiddle.net/PVv6c/