How to restrict textarea inputs to max 10 numbers in a line?

Here is an example of how to restrict the input of a textarea to a maximum of 10 numeric characters per line, and allow line breaks (newlines) using HTML and JavaScript, while also ensuring that the restriction works during copy-paste:

HTML

<textarea id="restrictedInput"></textarea>

JavaScript

document.getElementById("restrictedInput").addEventListener("input", function(event) {
  var input = this.value;
  var lines = input.split("\n");
  for (var i = 0; i < lines.length; i++) {
    lines[i] = lines[i].replace(/[^0-9]+/g, "");
    if (lines[i].length > 10) {
      lines[i] = lines[i].substring(0, 10);
    }
  }
  this.value = lines.join("\n");
});

DEMO

See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen.

In the above code, we use the “input” event listener to listen for changes to the textarea’s value. The “this.value” property returns the current value of the textarea. The code then splits the value into an array of lines using the “split” method and the line break character (“\n”).

Next, the code loops through each line and removes any non-numeric characters using a regular expression (‘/[^0-9]+/g’).This ensures that only numeric characters are allowed in the textarea. The code then checks the length of the line, and if it is greater than 10 characters, it is truncated to 10 characters. Finally, the code uses the “join” method to re-combine the lines into a single string and updates the textarea’s value.

With this code, users will be able to enter a maximum of 10 numeric characters per line, and line breaks, in the textarea. The restriction will also work during copy-paste operations, ensuring that only numeric characters are allowed in the textarea.