2012-05-21 203 views
5

我一直在搜索所有周末的解决方案,并且尚未找到可正常工作的解决方案。我试图实现的目标是限制textarea中每行字符的数量 - 不限制它们的一致性,但是每行选择不同数量的字符。限制Textarea中每行的字符数

例如:

  1. 我希望有只在4我的文本区域
  2. 1,2行和图3线将被限制为24个字符
  3. 4行将具有无限数量的字符

这是可能的一个textarea,或者有另一种方式做我与一个部门或东西。我意识到这很可能已经被覆盖,但是找到一个涵盖这个标准的实际工作脚本已经证明是非常困难的,而且我没有那种实现这些结果所需的技能。

感谢

+0

如果你问是否有可能。但你有什么尝试? – Joseph

+0

你试图去做什么?如果他们不必全部连接使用4个输入,则可以根据需要限制它们。你甚至可能甚至假冒CSS看起来像一个4输入,似乎是一个更好的解决方案 – Ryan

+0

你可以通过换行符分割和检测字符数。但问题在于,你无法控制每行所说的“行数”,这是由字体大小,字母间距等所决定的。某个OS上的一台机器上的一行可能与另一台机器上的另一行上的另一行不同。瑞恩的例子是一个更好的主意。 –

回答

6

下面是问题的一个样本快照你正在试图解决:

  • 4行文本域(此限制在文字区域本身=“4”行)
  • 行1,2,和3被限制为24个字符
  • 4号线将具有字符的数量不受限制

快照textarea的的:

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

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

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

这不是一个完整的解决方案,但是这一定会让你开始并为你提供一些你可以修改以满足你的需求的东西。祝你好运!

+0

我很确定'cols'控制宽度,而不是线条/高度。 – Daedalus

+0

@达达鲁斯 - 谢谢:)它接近称它为一个晚上:)修正! – jmort253

+0

欢迎:)当你到达那里时有一个良好的睡眠,嗯 – Daedalus