文本区域字段HTML中的行和列限制

Question

在文本区域字段中，我必须实现以下限制
1。text区域行数限制为6
2。text区域列限制为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 < textArray.length; i++) { //Unable to iterate loop
if (textArray[i].length > 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 rows="6" cols="20" class="limited"></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 += 'rn' + String.fromCharCode(e.keyCode);
} else {
p1 += String.fromCharCode(e.keyCode) + 'rn';
}
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;
}

<textarea cols="3" rows="4" class="limited"></textarea>

我想说的是，我对这段代码非常不满意，我确信有一些更可维护、更优雅的方法可以做这样的事情。

尽管如此，我认为您可以用它作为一个例子，说明您可以做您想做的事情。