我如何限制每行 textarea 的字节数？答案

【问题标题】：how can i limit the byte per line of textarea?我如何限制每行 textarea 的字节数？
【发布时间】：2021-07-05 06:48:47
【问题描述】：

此页面必须支持韩语，每个字符占用 2 个字节。我可以获得每行字节（lineByte），但我不知道我能做更多。我想引起换行或阻止输入。

function limitLines(obj, e) {
  let numberOfLines = (obj.value.match(/\n/g) || []).length + 1;
  let maxRow = obj.rows;
  if (e.which === 13 && numberOfLines === maxRow) {
    return false;
  }
}

$('textarea').on('keyup', function() {
  var maxLength = $(this).attr('data-leng');
  var text = $(this).val();
  var lines = text.split(/(\r\n|\n|\r)/gm);
  for (var i = 0; i < lines.length; i++) {
    var lineByte = 0;
    for (var j = 0; j < lines[i].length; j++) {
      var currentByte = lines[i].charCodeAt(j);
      if (currentByte > 128) {
        lineByte += 2;
      } else {
        lineByte++;
      }
    }
    console.log(lineByte);
    if (lineByte > maxLength) {
      console.log('How Can I Do?')
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea wrap="hard" name="" class="jua" onkeydown="return limitLines(this, event)" id="text_01_01" rows="2" cols="9" placeholder="Write Text &#13;&#10; In This Area." data-leng="18"></textarea>

【问题讨论】：

非常类似于javascript - How to limit number of characters per line in text area to a fixed value - Stack Overflow（字符与字节）

标签： javascript jquery textarea

【解决方案1】：

如果我猜对了，您希望将每行的最大字节数限制为小于data-leng。为此，您只需要剪切每行中的所有溢出字符。这是一个例子：

$('textarea').on('keyup', function() {
  var maxLength = $(this).attr('data-leng');
  var text = $(this).val();
  var lines = text.split("\n");
  for (var i = 0; i < lines.length; i++) {
    var lineByte = 0;
    for (var j = 0; j < lines[i].length; j++) {
      var currentByte = lines[i].charCodeAt(j);
      if (currentByte > 128) {
        lineByte += 2;
      } else {
        lineByte++;
      }
      
      //if line-bytes are greater than max-length remove chars at line-end
      if (lineByte > maxLength) {
        lines[i] = lines[i].substr(0, j);
        break;
      }
    }
    
    //join lines and replace value in textarea
    $(this).val (lines.join("\n"));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea wrap="hard" name="" class="jua" id="text_01_01" rows="2" cols="9" placeholder="Write Text &#13;&#10; In This Area." data-leng="18"></textarea>

【讨论】：

【解决方案2】：

首先，我建议使用'beforeinput' event，它的工作方式更像你所期望的，并且让你不必处理控制键输入等。在该事件中，为了防止他们在满足行长时输入更多字符，您只需调用event.preventDefault()。

const MaxLineLength = 64;
// this regex looks for any line longer than MaxLineLength characters
const CheckRegex = new RegExp(`(?:.{${MaxLineLength + 1},})$`, "mu")
document.getElementById('myInput').addEventListener('beforeinput', (event) => {
  // ignore newline and backspace/delete
  if (
    event.inputType === "deleteContentBackward"
    || event.inputType === "insertLineBreak"
    || event.inputType === "deleteContentForward") {
    return;
  }
  const text = (event.target.value || ''); // avoid undefined nonsense
  const cursorPos = event.target.selectionStart; // here's where they're typing/pasting
  const newText = text.slice(0, cursorPos) + event.data + text.slice(cursorPos); // here's the input that might be 

  // check the line length
  const hasLongLines = CheckRegex.test(newText);
  if (hasLongLines) {
    // if so, don't allow the input
    event.preventDefault();
    // TODO: show warning to user
  }
});

注意MaxLineLength 是 64。我们需要知道的不是字节数，而是字符数，因为 UTF-8 字符（包括韩语字符集）都是 2 个字节。

【讨论】：