テキストエリアの入力を改行をカウントせずに文字数で制限する方法

Question

以下のようなテキストエリアにおいて改行を含まずに入力文字数を制限したいと思い，maxlengthを使用しました．

<textarea id="test"　name="test" maxlength="100" required></textarea>

しかし，maxlengthは改行を1文字として扱いカウントしてしまうため改行をカウントせずに意図した文字数に制限をする方法を知りたいと思っております．よろしくお願いいたします．

Comments

[m.ts10806]

改行も「改行コード」という概念で「文字数」として含みます。その辺りはご理解の上でしょうか？他に調べたことやってみたことはありますか？

Answer 1

javascriptで監視し、改行マークが入るたびにmaxlengthを
拡張すれば可能です。
ただそこまですべきかどうかは微妙ですね。
改行コードを何万も打ち込んでもフィルタできないということですから

sample

念のためサンプル

window.addEventListener('DOMContentLoaded', function(e){
  with(document.querySelector('#test')){
    setAttribute('data-maxlength',test.getAttribute('maxlength'));
    addEventListener('input',function(e){
      var t=e.target;
      var l=parseInt(t.getAttribute('data-maxlength'))+t.value.split(/\r|\n/).length - 1;
      t.setAttribute('maxlength',l);
    });
  }
});

<textarea id="test" name="test" maxlength="5" required></textarea>

Comments

[x_x]

すでに上限に達している場合に改行できないという弱点もありますし

[m.ts10806]

どうせ監視するなら改行除いた文字数を裏で持っておいて規定に達したらそれ以上入力できないように対応した方が良いように思いますね。