Chrome と Firefox が minlength 属性に対応していた

公開日

input 要素と textarea 要素に minlength 属性が登場してから3年半が過ぎましたが(導入当時に書いた記事)、現在では Chrome と Firefox がツールチップを出す形で対応しています。

テストケースとして、8桁固定の会員番号入力欄で試してみます。マークアップはこんな感じ。

<p><label>会員番号(<strong>必須</strong>、8桁)
  <input name="id" required="" minlength="8" maxlength="8"/></label></p>

これを、わざと4文字しか入力しない状態で送信してみます。

Chrome 57

入力時点では何も起こりません。一応、入力欄をマウスオーバーするとツールチップが表示されるのですが、これに気付く人は稀でしょう。

オリジナル画像
図1:入力欄をマウスオーバーしたときのツールチップ

送信ボタンを押すとアイコン付きのツールチップで「このテキストは○文字以上で指定してください(現在は○文字です)。」と表示されますが、5秒ほど経つと自動的に消えてしまいます。

オリジナル画像
図2:送信したときのツールチップ表示

Firefox 52

入力を開始し、最小文字長を満たさない状態でフォーカスを外すと、入力欄が赤くなります。赤くなるだけなのでそのままでは何のエラーなのか分かりませんが、マウスオーバーするとツールチップで「少なくとも○文字以上に長くしてください(現在は○文字です)。」と表示されます。

オリジナル画像
図3:フォーカスを外したときの表示
オリジナル画像
図4:入力欄をマウスオーバーしたときのツールチップ

送信ボタンを押すと、ツールチップで「少なくとも○文字以上に長くしてください(現在は○文字です)。」と表示されます。 Chrome と異なり、フォーカスを外さない限り自動的には消えません。

オリジナル画像
図5:送信したときのツールチップ表示

なお、 Windows 10 + Firefox 52 + NVDA 2017.1jp の組み合わせでは、ツールチップの内容が自動的に読み上げられました。

Android版の場合

Windows版と同じ動作ですが、ツールチップの幅よりメッセージの方が長いため、電光掲示板のように自動横スクロールで表示されます。

オリジナル画像
図6:Android版Firefox のツールチップ表示

Edge 40

対応していないようです。