限制Textarea中每行的字符數

Question

我整個周末一直在尋找解決這個問題的方法，並且尚未找到一個正常工作的解決方案。 我試圖改進的是限制textarea中每行的charatcer數量 - 不是限制它們相同，而是每行選擇不同數量的字符。

例如：

1. 我想在我的textarea中只有4行
2. 第1,2和3行將限制為24個字符
3. 第4行將具有無限數量的字符

這可能是一個textarea，還是有另一種方式來做一個Div或其他東西。 我確實意識到這很可能已經被覆蓋過，但是找到一個覆蓋這個標准的實際工作腳本已經證明是非常困難的，而且我沒有那種技能來取得這些成果。

謝謝

Answer 1

以下是您嘗試解決的問題的示例快照：

• 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的長度，我們會發出警報。
• 我們忽略循環的最后一次迭代，因為我們不關心最后一行的長度。

這不是一個完整的解決方案，但這肯定會讓您開始並為您提供可以根據您的需求進行修改的內容。 祝好運！