时间戳

首页 > 解决方案 > 如何限制每行 textarea 的字节数？

javascript - 如何限制每行 textarea 的字节数？

问题描述

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

标签： javascriptjquerytextarea

解决方案

如果我猜对了，您希望将每行的最大字节数限制为小于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>

推荐阅读