古くはIE独自仕様のime-mode、最近ではHTML5で実装された多様なtypeなど、inputの入力方法を制御するための方法がいくつかあります。
しかし、ブラウザーによって利用可否が異なります。日本語特有の悩みということで、検索してもあまり情報が出てこないので、調査をしてまとめてみました。
結論から言うと、残念ながら入力方式を完全に制御するクロスブラウザな方法はありません。
2016年9月12日 inputmodeとEdgeについての記述を追加しました。
ime-mode:inactive | IE独自仕様で、入力方式を制御するCSS inactiveの場合は、半角英数入力になり、全角英数への変換が可能 |
ime-mode:active | IE独自仕様で、入力方式を制御するCSS activeの場合は、全角英数入力になり、半角英数への変換が可能 |
ime-mode:disabled | IE独自仕様で、入力方式を制御するCSS disabledの場合は、半角英数入力になり、全角英数への変換が不可能 |
type=tel | 電話番号用type属性 |
type=number | 数字用type属性 |
type=url | URL用type属性 |
type=email | メールアドレス用type属性 |
pattern属性 | 正規表現によって入力値を制限するための属性値 pattern="^[0-9]+$"のように使用 |
入力欄をフォーカスした際、全角・半角・数字など入力方式が変わるのかを調べました。
端末 | PC | スマホ | ||||||
ブラウザ | IE11 | Edge | Chrome | Firefox | OSX Safari | iOS Safari | Android Chrome | Android 標準 |
ブラウザ バージョン | 11 | 25.1 | 51 | 47 | 9.1.1 | iOS 9.3.2 | 51 | Android 4.4.2 |
ime-mode :inactive | ○ | ○ | × | ○ | × | × | × | × |
ime-mode :active | ○ | ○ | × | ○ | × | × | × | × |
ime-mode :disabled | ○ | ○ | × | ○ | × | × | × | × |
type=tel | ○ | ○ | ○ | ○ | × | ○ | ○ | ○ |
type=number | ○ | ○ | ○ | ○ | × | △*1 | ○ | ○ |
type=url | ○ | ○ | ○ | ○ | × | ○ | ○ | × |
type=email | ○ | ○ | ○ | ○ | × | △*2 | ○ | ○ |
pattern属性 | × | × | × | × | × | × | × | × |
*1) 数字入力になるものの、type=telと異なり、全角数字の入力になります
*2) フリック入力(数字盤で入力)の場合は切り替わらない
意図している形式とは異なる入力がある場合、これをJavascriptから取得できるかを調査しました。
端末 | PC | スマホ | ||||||
ブラウザ | IE11 | Edge | Chrome | Firefox | OSX Safari | iOS Safari | Android Chrome | Android 標準 |
ime-mode :inactive | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
ime-mode :active | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
ime-mode :disabled | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
type=tel | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
type=number | × | × | × | × | × | × | × | × |
type=url | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
type=email | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
pattern属性 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
一目瞭然の結果で、type=numberだけが他とは異なることが分かりました。
Javascriptで入力値を扱う際は、type=numberにだけは注意が必要です。
端末 | PC | スマホ | ||||||
ブラウザ | IE11 | Edge | Chrome | Firefox | OSX Safari | iOS Safari | Android Chrome | Android 標準 |
ime-mode :inactive | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
ime-mode :active | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
ime-mode :disabled | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
type=tel | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
type=number | × blur時に消える | × 送信不可 | × 入力不可 | × 送信不可 | × | × | × 入力不可 | × |
type=url | × 送信不可 | × 送信不可 | × 送信不可 | × 送信不可 | ○ | ○ | × 送信不可 | ○ |
type=email | × 送信不可 | × 送信不可 | × 送信不可 | × 送信不可 | ○ | ○ | × 送信不可 | ○ |
pattern属性 | × 送信不可 | × 送信不可 | × 送信不可 | × 送信不可 | ○ | ○ | × 送信不可 | ○ |
list属性は、入力欄をフォーカスした際に入力値の選択肢を表示する便利な新仕様です。次のようなHTMLで実装します。
<input type="text" name="name" list="options" />
<datalist id="options">
<option value="東京都"></option>
<option value="神奈川県"></option>
<option value="千葉県"></option>
</datalist>
この例では、東京都・神奈川県・千葉県は選択によって入力が可能な、inputとselectのいいとこ取りの便利な機能です。
主要なブラウザでの利用可否をついでに調査してみました。
端末 | PC | スマホ | ||||||
ブラウザ | IE11 | Edge | Chrome | Firefox | OSX Safari | iOS Safari | Android Chrome | Android 標準 |
list属性 | ○ | ○ | ○ | ○ | × | × | ○ | × |
ブラウザシェアで考えると、半数の人が利用可能です。非対応ブラウザに悪影響がないので、利用価値がある場合は積極的に活用しましょう。
一方、この機能が主機能の場合(まめわざの不動産システムでは、同種の入力補助機能が重要な主機能の1つです)は、Javascriptで別途クロスブラウザな同機能を実装する必要があります。
HTML5で追加された入力方式を制御する属性。
規定のプロパティ名に「kana」や「katakana」などがある期待の新仕様です。
端末 | PC | スマホ | ||||||
ブラウザ | IE11 | Edge | Chrome | Firefox | OSX Safari | iOS Safari | Android Chrome | Android 標準 |
verdatim 英数字 | × | × | × | × | × | × | × | × |
kana 日本語 | × | × | × | × | × | × | × | × |
kana-name 日本語の人名 | × | × | × | × | × | × | × | × |
katakana カタカナ | × | × | × | × | × | × | × | × |
numeric 数字 | × | × | × | × | × | × | × | × |
tel | × | × | × | × | × | × | × | × |
× | × | × | × | × | × | × | × | |
url | × | × | × | × | × | × | × | × |
全敗という残念な結果となりました。
繰り返すようですが、日本語のように変換を必要とする言語圏の人が開発を主導していないことが主な原因と思われます。
我々が欲しい機能はまさにこれなので、今後の導入に大いに期待したいと思います。
将来採用が拡大されれば、ウェブにおける日本語入力環境が劇的に改善されます。
この他、iOSでは半角入力時に1文字目が自動で大文字になるのを避ける「autocapitalize」を必要に応じて利用しましょう。