javascript - textarea 字段 HTML 中的行和列限制

Question

在 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 < 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>

在上面的代码循环中不起作用。只有第一行会迭代。
如果有更好的方法，请提出建议。

我的要求是 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;
}

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

我想说我对这段代码完全不满意，我很确定有一些更易于维护和优雅的方式来做这样的事情。

不过，我认为您可以以此为例，说明您如何可以做您想做的事。