textarea字段HTML中的行和列限制

在textarea领域，我必须实施以下限制
1. textarea行限制为6
2. textarea cols限制为20
3.如果任何行超过20长度，如果行可用，该行将分成两行

我的代码：

function limitTextareaLine(e) { if (e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) { return false; } var result = ""; var textArray = $(this).val().split("\n"); alert(textArray.length); for (var i = 0; i  5) { alert('aaa'); if (textArray.length == 6) { alert("nnnnn"); return false; } result += textArray[i] + "\n"; } else { result += textArray[i]; } alert(textArray[i]) } for ( var line in textArray) { } alert(result); $(this).val(result); } $(function() { $('textarea.limited').keydown(limitTextareaLine); });  

在上面的代码循环不起作用。 只有第一行会迭代。
请建议是否有更好的方法来做到这一点。

我的要求是textarea提交最多6行，每行最大字符数为20.如果任何行超过最大字符限制，如果有最大行限制，则拆分为两行。

Answer 1

如果我理解正确，这可能是你正在寻找的。

 function limitTextareaLine(e) { const newLine = /\r*\n/g; const value = e.target.value; const newLines = (value.match(newLine) || []).length; const lines = value.split(newLine); //enter if (e.keyCode === 13 && lines.length >= e.target.rows) { e.preventDefault(); return; } const lineNo = value.substr(0, e.target.selectionStart).split(newLine).length - 1; //backspace if (e.keyCode === 8 && ~value.charAt(e.target.selectionStart - 1).search(newLine)) { if (lines[lineNo].length + lines[lineNo - 1].length <= e.target.cols) return; e.preventDefault(); return; } //del if (e.keyCode === 46 && ~value.charAt(e.target.selectionStart).search(newLine)) { if (lines[lineNo].length + lines[lineNo + 1].length <= e.target.cols) return; e.preventDefault(); return; } if (e.key.length > 1) return; if (value.length < e.target.cols) return; if (lines[lineNo].length > e.target.cols - 1) { if (lines.length < e.target.rows) { const col = (e.target.selectionStart - newLines) / lines.length; let p1 = value.substr(0, e.target.selectionStart); if (col === e.target.cols) { p1 += '\r\n' + String.fromCharCode(e.keyCode); } else { p1 += String.fromCharCode(e.keyCode) + '\r\n'; } e.target.value = p1 + value.substr(e.target.selectionStart, value.length); e.target.selectionStart = p1.length - 1; e.target.selectionEnd = p1.length - 1; } e.preventDefault(); return; } } document.addEventListener('DOMContentLoaded', function() { document.querySelector('textarea.limited').addEventListener('keydown', limitTextareaLine); }); 

 .limited { width: 200px; height: 200px; }