textareaを文字数制限してその先は入力できないように(半角、全角判別)

Question

フォーム入力で半角20字、全角10字までの制限をしたいです。

現時点で半角を1字、全角を２字にし最大を２０字と設定しました。
20字に達したら入力できないようにしたいのですが、その方法が分からず、、
警告や送信ボタンを無効化等はヒットしますが、
出来れば入力オーバーしたら文字がカットするようにしたいです。
this.value.substr(0 ,20)としましたが
Cannot read property 'substr' of undefinedとでます
そもそも、this.valueでいってしまうと結局半角も1字と数えられるのでしょうか、、

いい方法あれば、ぜひ教えてください。

<div class="comment Wrap">
  <form action="URL" method="get" class="comment_form" onsubmit="c_done();return false;">
    <textarea name="comment" rows="6" cols="10" onkeyup="TextLength(this.value);"></textarea>
      <div class="send">
        <input class="btn" type="submit" value="送信">
      </div>
   </form>
</div>

//文字数制限
function TextLength( str ) {
  var len = 0;
  var string = "";
  var maxlen = 20;
  for(i=0;i<str.length;i++) {
    STR = str.charAt(i);
    len += (STR.match(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/)) ? 1:2;　//半角ならば+１
    if(len> maxlen){
      this.value.substr(0 ,20);
      // string += STR[i];
    };
    console.log(len);
  };
};

// コメントありがとうモーダル表示
function c_done(){
 $("#done").modal();
}

Comments

[yambejp]

> 20字に達したら入力できないようにしたい

半角19文字まで埋まって後一文字のときに全角文字は入れられるかどうかによります
また改行は1文字と数えるのでしょうか？

[nana_ton]

全角は２とカウントされるので最後の1文字にいれれないです。
改行も全角同様２文字扱いになります！

[退会済みユーザー]

inputのmaxlength属性を条件別に切り替えではダメですか？

[nana_ton]

ご意見ありがとございます。
それは半角ならmaxlength=20、全角ならmaxlength=10ということでしょうか？

[退会済みユーザー]

そうです。正規表現などの何かしらの方法で、全角、半角を判別して、↑の属性を入力値に応じて切り替える感じです。http://alphasis.info/2014/01/javascript-dom-input-text-maxlength/

[nana_ton]

なるほど！
全角半角混合の場合も可能でしょうか？

Answer 1

参考サイトありましたよ
http://kihon-no-ki.com/javascript-count-multi-byte-characters-as-two-single-byte-one

Comments

[nana_ton]

回答ありがとうございます。
半角、全角の判別はできているのですが
その後20字に達したら入力できないようにしたいのです、、

[退会済みユーザー]

textarea に change イベントでチェックさせれば目的は鉄製できると思います。

[nana_ton]

ご意見ありがとうございます！
change調べてみます！

Answer 2

this.value.substr(0 ,20)としましたが

Cannot read property 'substr' of undefinedとでます

エラーになっているのはthis.value.substr(0, 20)のthisがテキストエリアを指していないので、valueが取れない（stringではない）ためだと思います。

**正解かどうか別として、**下記で動くのは動きます。
質問文からテキストエリア内に全半角が混ざるという意味だととらえています。
※「以上」と「より大きい」をすごーーーくよく間違えるので、★のところのiは違ったら微調整してください。

<textarea name="comment" rows="6" cols="10"  onkeyup="TextLength(this);"></textarea>

function TextLength( that ) { // that = textarea
  const str = that.value;
  var len = 0;
  var string = "";
  var maxlen = 20;
  for(i=0;i<str.length;i++) {
    STR = str.charAt(i);
    len += (STR.match(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/)) ? 1:2;　//半角ならば+１
    if(len> maxlen){
      that.value=str.substr(0 ,i); // ★
      // this.value.substr(0 ,20);
      // string += STR[i];
    };
  };
};

ただあんまりお勧めしないです。。。
以前私も似たようなことをしたのですが、入力中のひらがな状態で判定されてしまって「漢字に変換したら文字内に収まるのに、素直に入力できなくてストレス！」と苦情になりました。
あとブラウザか何かが出してくる「予測候補」とかから選択する文字数オーバーでも入ってしまいますし…。
Kosuke_Shibuyaさんが言われている通りonchangeでチェックするか、文字を切らずに警告（色を赤くするなど）にとどめる方が良いと思います。

Comments

[nana_ton]

ご返信遅くなり、申し訳ございません！
ご意見ありがとうございます！
いろいろ不具合ありそうですね、、、
もう文字を切らずに警告にしようかと思います！