我如何限制文本区域每行的字节数？

Question

此页面必须支持韩语，每个字符占用 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>

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

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

Note the MaxLineLength is 64. Rather than counting bytes, all we need to know is the character count because UTF-8 characters (which includes the Korean character set) are all 2 bytes.

我如何限制文本区域每行的字节数？

how can i limit the byte per line of textarea?

javascript

jquery

textarea