HTMLのinput要素の入力制限【現役エンジニアが解説】
今回は、HTMLのinput要素の入力制限について、文字数や入力方式、入力値に分け、簡単に解説していきます。
最小もしくは最大文字数制限
最小文字数制限はminlength属性で文字数を指定します。
一方、最大文字数に関してはmaxlength属性で制限することができます。
<input type="tel" minlength="10" maxlength="11">
上記のコードでは、電話番号入力欄の最小文字数を10、最大文字数を11に設定しています。
フォーカス時の入力方式制限
フォーカスした際の入力方式を変えるにはtype属性を変更します。
ブラウザ次第ですが、type属性がemailであれば基本的には半角英数字に切り替わります。
<input type="email">
上記のコードでは、type属性をemailにすることで、Google Chrome等で入力方式が半角英数字になります。
正規表現による入力値の制限
pattern属性を使うことで正規表現による入力値の制限が可能になります。
type属性より確実に制御することが可能ですが、pattern属性もブラウザにより対応状況が異なります。
<input type="text" pattern="^[0-9A-Za-z]+$">
上記のコードでは、pattern属性を使って、Google Chrome等では半角英数字のみに入力値を制限しています。