Textarea使用Javascript限制字符和行

时间:2016-09-26 20:00:42

标签: javascript validation textarea

这个主题有一些类似的主题,但目前的要求更具体,我无法将它与现有的解决方案结合起来,所以请社区帮助我。我需要为规则构建textarea js验证器:

  • 4行,最多32个字符

  • 最多128个字符

  • 剩余字符计数器显示在textarea

  • 以及我已经找到的其他方法......

请告诉我如何实现这个目标?

P.S。应该清楚Javascript解决方案

1 个答案:

答案 0 :(得分:1)

这就是您的代码的外观(另请参阅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 + '.';
}