how can i limit the byte per line of textarea?

Question

This page must support Korean, which takes up 2 bytes per character. I can get byte per line(lineByte), but I don't know how i can do more. I want to cause a line break or block input.

 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

If I get you right, you want to limit each line to a maximum amount of bytes smaller than data-leng . To do so you just need to cut all overflowing characters in each line. Here is an example:

 $('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

First, I'd suggest using the 'beforeinput' event , which works more like you'd expect and keeps you from having to handle control key inputs, etc. Within that event, to keep them from entering more characters if the line length is met, you can simply call 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.