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

【问题标题】：Rows and column limit in textarea field HTML文本区域字段 HTML 中的行和列限制
【发布时间】：2017-11-02 09:55:13
【问题描述】：

在 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。如果任何行超过最大字符数限制，如果最大行数限制可用，则分成两行。

【问题讨论】：

不需要 JS，只需在 HTML 中使用 wrap="hard" 属性
我认为您的问题可能与您的 textArray 变量有关。 split 函数为每个拆分创建一个数组。所以也许试试'i
啊。在这种情况下，我建议使用 6 个带有 maxlength="20" 的文本框
@MakarandPatil 在这种情况下，您可以插入超过 10 行长度为 5 的行。rows="6" 不会限制行数限制。
不要使用for...in 来遍历数组，它是doesn't guarantee the order it iterates in！请改用Array.prototype.forEach、for 或for...of。根据您正在做的事情，Array.prototype.reduce 之类的东西也可能会起作用。

标签： javascript jquery html

【解决方案1】：

如果我理解正确，这可能就是您要找的。p>

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;
}

&lt;textarea cols="3" rows="4" class="limited"&gt;&lt;/textarea&gt;

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

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

【讨论】：