Personal WP Customization Notes (PWCN)

HTMLでフォームに入力項目を作るために使用するinputタグ。

半角の英数字や数字のみで入力させたいのに、日本語入力が有効になっている場合にいちいち無効にしなければならないわずらわしさを解消する要素の指定方法をいつも忘れてしまうのでメモとして公開しておきます。

完全に制御するためにはJavaScriptを使って入力された値を強制的に数値や英字のみにするといった措置も必要でしょうがそこまでせずHTMLタグのみである程度制御したいときの簡易的な方法です

まずは数字に限定する要素の指定方法から。

以下のように「pattern=”[0-9]*”」を使ってパソコンからの入力を数値に限定、そして「inputmode=”numeric”」を使ってモバイルからの入力を数値に限定します。

<input type="text" name="name" id="id" required pattern="[0-9]*" inputmode="numeric" />

次に半角英数字に限定したい場合の指定方法。

以下のように「pattern=”[0-9A-Za-z]*”」でパソコン側からの入力を数値と英字のみにし、「inputmode=”text”」でモバイルでは文字入力モードに切り替えます。

モバイルでは文字入力をと指定できるだけで完全制御できない点には注意が必要です

<input type="text" name="name" id="id" required pattern="[0-9A-Za-z]*" inputmode="text" />