限制Textarea中每行的字符数

时间:2012-05-21 06:37:22

标签: javascript html textbox

我整个周末都在寻找解决这个问题的方法,并且尚未找到一个正常工作的解决方案。我想要改进的是限制textarea中每行的charatcer数量 - 不是限制它们相同,而是每行选择不同数量的字符。

例如:

  1. 我想在textarea中只有4行
  2. 第1,2和3行将限制为24个字符
  3. 第4行将包含无限数量的字符
  4. 这是可能的textarea,还是有另一种方式来做一个Div或其他东西。我确实意识到这很可能已经被覆盖过了,但是找到一个涵盖这个标准的实际工作脚本已经证明是非常困难的,而且我没有那种技能来取得这些成果。

    由于

1 个答案:

答案 0 :(得分:6)

以下是您尝试解决的问题的示例快照:

  • textarea中的4行(限制在textarea本身上,行=“4”)
  • 第1,2和3行限制为24个字符
  • 第4行将包含无限数量的字符

textarea的快照:

123456789012345678901234
123456789012345678902333
232323232323232323323232
23232323232323232323236464536543654643

<强> JavaScript的:

$('#your-input').keypress(function() {
     var text = $(this).val();
     var arr = text.split("\n");

     if(arr.length > 5) {
         alert("You've exceeded the 4 line limit!");
         event.preventDefault(); // prevent characters from appearing
     } else {
         for(var i = 0; i < arr.length; i++) {
             if(arr[i].length > 24 && i < 3) {
                 alert("Length exceeded in line 1, 2, or 3!");
                 event.preventDefault(); // prevent characters from appearing
             }
         }
     }

     console.log(arr.length + " : " + JSON.stringify(arr));
});

这可以使用按键事件来完成。触发按键事件时,获取文本框的当前值,并使用\n换行符作为分隔符将值拆分为数组。

  • 数组的长度告诉您有多少行。如果您已超出这些线路,我们会发出警报。
  • 数组中每个字符串的长度表示每行的长度。我们使用for循环来检查前3行。如果我们超过24的长度,我们会发出警报。
  • 我们忽略循环的最后一次迭代,因为我们不关心最后一行的长度。

这不是一个完整的解决方案,但这肯定会让您开始并为您提供可以根据您的需求进行修改的内容。祝你好运!