限制多行字段中每行的字符数

Question

我需要具有 TextArea 的功能

1. 每行最多只能有 30 个字符
2. 不想在键入时修剪任何值，一行中超过 30 个的下一个字符需要自动出现在下一行

我正在使用下面的代码，但它会在粘贴包含 30 多个字符的行时修剪下一行的第一个字符。

<textarea id="textareainput"></textarea>


var input= document.getElementById("textareainput");
var lines = input.value.split("\n");
var start = input.selectionStart;
var end = input.selectionEnd;

for (var i = 0; i < lines.length; i++) {
  if (lines[i].length <= 30) continue;
  var j = 0; space = 30;
  while (j++ <= 30) {
    if (lines[i].charAt(j) === " ") space = j;
  }
  lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] ? " " + lines[i + 1] : "");
  lines[i] = lines[i].substring(0, space);
}

input.value = lines.slice(0, lines.length).join("\n");

if (start == end) {
  input.setSelectionRange(start, end);
}

Answer 1

尝试以下（您的代码稍作改动）

   $('#textareainput').on('input focus keydown keyup', function() {
    var input= document.getElementById("textareainput");
var lines = input.value.split("\n");
var start = input.selectionStart;
var end = input.selectionEnd;

for (var i = 0; i < lines.length; i++) {
  if (lines[i].length <= 30) continue;
  var j = 0; space = 30;
  while (j++ <= 30) {
    if (lines[i].charAt(j) === " ") space = j;
  }
  lines[i + 1] = lines[i].substring(space) + (lines[i + 1] ? " " + lines[i + 1] : "");
  lines[i] = lines[i].substring(0, space);
}

input.value = lines.slice(0, lines.length).join("\n");


});

由于光标定位问题更新解决方案：

 function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}
 function formatStr(str, n) {
   var a = [], start=0;
   while(start<str.length) {
      a.push(str.slice(start, start+n));
      start+=n;
   }
  return a.join("\n");
}

$('#textareainput').on('input focus keydown keyup', function() {
    var input= document.getElementById("textareainput");
var lines = input.value.split("\n");
var start = input.selectionStart;
var end = input.selectionEnd;

var v = input.value;
        var vl = v.replace(/(\r\n|\n|\r)/gm,""); //remove all newlines  

        input.value = formatStr(vl,30);

        var lines1 = input.value.split("\n");

        if (start == end)   {
            if(lines1.length!=lines.length)
                setCaretToPos(input, end+1);
            else
            setCaretToPos(input, end); 
        }
});