maxlength属性がユーザーの利便性を阻害するケース

投稿

HTML5 では、フォームに required, pattern などのバリデーションが導入されましたが、maxlength属性は RFC 1866（HTML 2.0）時代から存在するもので、どのブラウザも対応しているため広く使われています。しかし、JavaScriptを使わずに簡単にバリデーションができるという制作上の利便性のみに着目し、ユーザーのデメリットを考慮せずに導入してはいないでしょうか。

たとえば、電話番号の入力欄（ハイフン不可）を作るとき、このようなマークアップをしがちかと思います。

<label>電話番号（半角数字、ハイフンなし）
  <input type="tel" minlength="10" maxlength="11" pattern="0[1-9][0-9]{8,9}"/>
</label>

この場合、電話番号をコピペ、あるいは辞書登録しているユーザーが、いったんハイフン付きの文字列を入力してからハイフンを手動で消したいと思っていたらどうでしょうか。

ハイフン付きの12桁ないし13桁の電話番号を入力したつもりが、実際は末尾の1桁ないし2桁が切り詰められてしまうので、いったんすべて消して手動入力し直すか、あるいは次の操作をしないといけません。

  1. 左矢印キーを何回か押下して、Backspaceキーで最初のハイフン（市外局番と市内局番の区切り）を消す
  2. 右矢印キーを何回か押下して、Deleteキーで2番目のハイフン（市内局番と加入者番号の区切り）を消す
  3. 右矢印キーを長押しして、文字列の末尾にフォーカスを戻し、切り詰められた番号を手動入力する

なんともストレスが溜まりますね……。

もっとも良い解決方法は、ハイフンありのフォーマットも受け入れ、データベース格納時にサーバーサイドで変換処理（除去）を行うことでしょう。

<label>電話番号（半角数字）
  <input type="tel" minlength="10" maxlength="13" pattern="0[1-9][-0-9]{8,11}"/>
</label>

しかし、現実問題としてサーバーサイドの挙動を変更できない等の理由で理想どおりにはいかないことが多いです。その場合は、maxlength属性値に余裕を持たせておくと良いと思います。

<label>電話番号（半角数字、ハイフンなし）
  <input type="tel" minlength="10" maxlength="13" pattern="0[1-9][0-9]{8,9}"/>
</label>

同様のことは郵便番号や住所にも当てはまりますが、ユーザーはすべての項目を手動で入力するとは限らないという点を考慮してマークアップを行っていただけると、それはとっても嬉しいなって。