HTML5の入力フィールドでダッシュ（ハイフン）を受け入れる方法【pattern属性の正規表現活用】

HTML5のフォームで、ダッシュ（ハイフン）やカンマを含む数値を入力フィールドで受け付けたい場合、pattern属性に正規表現を指定することで簡単に実現できます。本記事では、具体的なコード例とあわせてその手順をわかりやすく解説します。

pattern属性に正規表現を指定する

HTML5では、input要素のpattern属性に正規表現を記述することで、ユーザーが入力できる値の形式を制限できます。ダッシュやカンマを含む数値を受け入れたい場合は、以下のような正規表現を使用します。

[0-9]+([-\][0-9]+)?

この正規表現の各部分の意味は次のとおりです。

• [0-9]+：1桁以上の数字を必須とします。
• ([-\][0-9]+)?：ダッシュ（-）またはカンマ（,）に続く数字を、あってもなくてもよい形式（0回または1回）で許可します。

実際のコード例

上記の正規表現をpattern属性に組み込んだコードは、以下のようになります。

<input type="text" pattern="[0-9]+([-\][0-9]+)?" name="my-num" title="ダッシュまたはカンマを入力できます">

title属性に説明文を設定しておくと、入力形式が不正だった場合にブラウザが表示するエラーメッセージのヒントとして活用されるため、ユーザビリティの向上にもつながります。

重要な注意点：type="text"を使う必要がある

この方法を実装するうえで最も重要なポイントは、input要素のtype属性を「number」ではなく「text」にすることです。

type="number"を指定した場合、pattern属性による入力バリデーションが機能せず、ダッシュを含む値を受け付けられません。これはHTML5の仕様上、pattern属性がテキスト系の入力タイプにのみ適用されるためです。

そのため、ダッシュやカンマを含む数値入力を許可したい場合は、type属性を「text」に設定し、pattern属性で入力形式を厳密に制御するのが確実かつ効果的な方法といえます。