Javascript 具有有限行和字符限制的文本区域

我需要的功能将与文本区

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 e.g "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 e.g.
        Hello, I Love St
        ackOverflow
now the whole word should come to next line like:

        Hello, I Love
        StackOverflow 
        and its features

这里是我到目前为止所做的链接

有时一些功能正常，有时不正常，并且onKeyUp和onKeyDown面临浏览器问题

---

有人能帮我吗？

我想这正是你想要的：

<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");
};

var textarea=document.getElementById（“拆分行”）；
textarea.onkeyup=函数（）{
变量行=textarea.value.split（“\n”）；
对于（变量i=0；i
$(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>

$（函数（）{
var limit=函数（事件）{
var linha=$（this.attr（“limit”）.split（“，”[0]；
var coluna=$（this.attr（“limit”）.split（“，”[1]；
变量数组=$（此）
.val（）
.split（“\n”）；
$.each（数组、函数（i、值）{
数组[i]=value.slice（0，linha）；
});
如果（array.length>=coluna）{
array=array.slice（0，coluna）；
}
$（this.val（array.join（“\n”））
}
$（“文本区域[限制]”）
.keydown（限制）
.keyup（限制）；
})

始终发布相关代码/标记等。在问题本身中，不要只链接到JSFIDLE（FIDLE也不错）强烈建议改为这样做：允许人们自由打字，向他们展示他们是否超出限制，并且当他们超出限制时不允许他们发帖。但不要试图阻止他们超出限制。这是一种更好的用户体验。（在此处的评论框中键入大量内容，以了解我的意思。）根据经验，在文本区域上编写这种逻辑是一项非常庞大和复杂的任务。你应该先退后一步，问问你自己（或你的客户）这对你/他们来说是否真的值得。你将面临的最大问题是字体…并不是所有的字体都是等距的（即，无论使用哪个字符，宽度相同）这意味着您无法可靠地计算每行上有多少个字符。除此之外，您还必须考虑浏览器自己的包装功能。您是否计划使用单间距字体？@gavin，我可以计算每行中的字符数，我正在使用字体系列-arial@SunilLohar-Lukas的解决方案实际上也使用纯javascript.mooto创建新小提琴时默认选择ls；）嗯…显然它不能保留光标的位置…我必须解决这个问题。我们如何避免在添加新行时出现空格，它会在添加空格之前添加新行。好吧，感谢大家分享他们的意见，我真的很难为这些功能编写代码，@Lukas-令人兴奋-这是我在你身上看到的惊人逻辑之一r代码，我不知道要编写这么多功能，我们可以用这么小的代码。我也解决了第二个问题-，按照这里的建议存储当前选择的开始和结束，并在应用textbox值后设置它们。只有在开始和结束相同的情况下才这样做-以便仍然允许选择文本，否则选择将每次击键都会复位。