ラボ > Javascript関連:form、HTML:form関連

html+formのテキストフィールドやテキストエリアでの文字数制限

htmlだけで対応可能。

作成日:2017-12-07, 更新日:2018-02-15

基本

「maxlength」を使えばOK(maxlengthの値が大きいと望ましくない結果になることもある)

日本語入力確定後、maxlengthを超えた文字たちは消される。半角なら入力ができなくなる。
※現在(2017/12/19時点)では知らないが、一部の携帯端末では、maxlengthが文字数じゃなく、バイト数になる。

文字数の確認(Jquery)

$(〇〇〇).on('input', 〇〇〇, function(){
  // 文字数 → $(this).val().length;
});

文字数の確認だけ。
例えば、「テキストフィールドの下のスペースに文字数を表示」なら良いけど、「テキストフィールドの中身の文字をゴニョゴニョ」するとなると注意が必要。
※未確定の日本語が消えたり、ダブったり、順番が入れ替わったり・・・色々と注意が必要

maxlengthの注意

・改行も文字数としてカウントされる
・maxlengthの値が大きくなると・・・制限を軽く超えて入力できることがある
・ブラウザによっては文字数じゃなくバイト数になる(※現在(2017/12/19時点)では知らないが、一部の携帯端末では、maxlengthが文字数じゃなく、バイト数)

maxlengthの代案

「IME関連)日本語入力中」「IME関連)日本語入力後、確定」「コピペした場合」なども考慮すると下記のどちらか。
※単純に文字数のカウントだけなら、上記の内容でOK。

・keyupとかのイベントを拾ってゴニョゴニョする
・keyupとかのイベントを拾わずにゴニョゴニョする

keyupとかのイベントを拾ってゴニョゴニョ

面倒だから諦める。
各ブラウザごとによって異なってくるので、自前で用意するのは面倒。どっかの誰かが手ごろなライブラリを用意してくれているはず・・・。

keyupとかのイベントを拾わずにゴニョゴニョ

文字入力以外でイベントを拾う感じ。

この手のヤツってformで何かを送るって感じだから「送信(or 内容確認)ボタン」ってのがあると思う。
その「送信(or 内容確認)ボタン」にクリックイベントで文字数チェック。

関連項目

html フォームのmaxlengthについて