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>

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

尽管如此，我认为你可以将此作为做你想做的事的一个例子。

textarea字段HTML中的行和列限制

1 个答案: