2012-05-21 244 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