Oleg Sapishchuk Oleg Sapishchuk - 2 months ago 11
Javascript Question

Textarea limit characters and lines with Javascript

There are some similar topics to this theme, but current requirements are more specific and I couldn't combine it yet with existent solutions, so asking community to help me with. I need to build textarea js validator for rules:


  • 4 lines of 32 characters maximum

  • of 128 characters maximum

  • a remaining characters counter is displayed under the textarea

  • and other that I already found how to do...



Could you please tell how I could implement this?

p.s. It should be clear Javascript solution

Answer

This is how your code should look like (see also JSFiddle):

var rows = 4;
var cols = 32;

var body = document.body;
var ta = createElem(body, 'textarea');
var div = createElem(body, 'div');

ta.rows = rows;
ta.cols = cols;

ta.addEventListener('keyup', () => {
  var lines = ta.value.split('\n');

  lines = lines
    .slice(0, Math.min(lines.length, rows))
    .map(line => line.substring(0, cols));

  ta.value = lines.join('\n');
  displayRemaining(cols * rows - ta.value.length + rows - 1);
});

displayRemaining(cols * rows);

function createElem(a, b){
  b = document.createElement(b);
  a.appendChild(b);
  return b;
}

function displayRemaining(a){
  div.innerHTML = 'Characters remaining: ' + a + '.';
}
Comments