CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス　まめわざ]

CSSやtype属性でinputの全角・半角入力を切替える

古くはIE独自仕様のime-mode、最近ではHTML5で実装された多様なtypeなど、inputの入力方法を制御するための方法がいくつかあります。
しかし、ブラウザーによって利用可否が異なります。日本語特有の悩みということで、検索してもあまり情報が出てこないので、調査をしてまとめてみました。
結論から言うと、残念ながら入力方式を完全に制御するクロスブラウザな方法はありません。

2016年9月12日　inputmodeとEdgeについての記述を追加しました。

調査するCSS・属性値

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]+$"のように使用

調査）inputにフォーカスした際に入力方式を制御できるか

入力欄をフォーカスした際、全角・半角・数字など入力方式が変わるのかを調べました。

端末	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) フリック入力（数字盤で入力）の場合は切り替わらない

考察

pattern属性はフォーム送信時のバリデーション（正誤判定）用のため、入力制御目的では利用できません。
typeは一部のブラウザが未対応です。最大のユーザー数を抱えるiOSにおいて、type=numberとtype=emailは不可解な動作をするため、利用には注意が必要です（これは、文字変換が不要な言語の開発者が作ったものに、文字変換機能を後付しているためと予想されます）。
ime-modeの便利さが際立っています。IE11とFirefoxユーザーには効果があり、別のブラウザーに悪影響がないので利用可能です。HTMLの仕様は、文字変換が不要な言語の開発者たちが主導している思われますが、文字変換が必要な我々にとっては、ぜひ標準仕様に昇格をさせて欲しいです。
inputmodeは一切使用できません。

調査）意図しない入力値をJavascriptで取得できるか

意図している形式とは異なる入力がある場合、これを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属性	× 送信不可	× 送信不可	× 送信不可	× 送信不可	○	○	× 送信不可	○

考察

type=numberは、Safariにおいて「送信できる（バリデーションエラーが出ない）のにサーバーサイドで値を取得できない」という最悪の結果です。
この点で、type=numberの使用は避けたほうが無難と言えます。
type=number/url/email、pattern属性のバリデーションは、OSX・iOS・Android標準ブラウザにおいては機能しません。この点で、これらをバリデーション目的で利用する際は、Javascriptなどで別のバリデーションを用意する必要があります。
別のバリデーションを用意し、HTML5ネイディブのtype属性によるバリデーションと併用するのは整合性をとるのが面倒なため、結局Javascriptに頼ったほうが楽だという結論に至るでしょう。以上から、type=number/url/email、pattern属性をバリデーション目的としても使わないほうが無難と言えます。
type=telはバリデーションが働かず、一方で入力方式の切替も対応ブラウザが多いため、入力方式の制御目的で利用価値があります。
ime-modeは、入力方式を制御するためのもので、入力された値のバリデーションは効かず、送信には影響を与えません。

ついでの調査）list属性は使えるのか

list属性は、入力欄をフォーカスした際に入力値の選択肢を表示する便利な新仕様です。次のようなHTMLで実装します。

この例では、東京都・神奈川県・千葉県は選択によって入力が可能な、inputとselectのいいとこ取りの便利な機能です。
主要なブラウザでの利用可否をついでに調査してみました。

端末	PC					スマホ
ブラウザ	IE11	Edge	Chrome	Firefox	OSX Safari	iOS Safari	Android Chrome	Android 標準
list属性	○	○	○	○	×	×	○	×

考察

ブラウザシェアで考えると、半数の人が利用可能です。非対応ブラウザに悪影響がないので、利用価値がある場合は積極的に活用しましょう。
一方、この機能が主機能の場合（まめわざの不動産システムでは、同種の入力補助機能が重要な主機能の1つです）は、Javascriptで別途クロスブラウザな同機能を実装する必要があります。

追加調査）inputmode属性

HTML5で追加された入力方式を制御する属性。
規定のプロパティ名に「kana」や「katakana」などがある期待の新仕様です。

端末	PC					スマホ
ブラウザ	IE11	Edge	Chrome	Firefox	OSX Safari	iOS Safari	Android Chrome	Android 標準
verdatim 英数字	×	×	×	×	×	×	×	×
kana 日本語	×	×	×	×	×	×	×	×
kana-name 日本語の人名	×	×	×	×	×	×	×	×
katakana カタカナ	×	×	×	×	×	×	×	×
numeric 数字	×	×	×	×	×	×	×	×
tel	×	×	×	×	×	×	×	×
email	×	×	×	×	×	×	×	×
url	×	×	×	×	×	×	×	×

考察

全敗という残念な結果となりました。
繰り返すようですが、日本語のように変換を必要とする言語圏の人が開発を主導していないことが主な原因と思われます。
我々が欲しい機能はまさにこれなので、今後の導入に大いに期待したいと思います。
将来採用が拡大されれば、ウェブにおける日本語入力環境が劇的に改善されます。

まとめ

入力方式を完全に制御することはできません。
一部ブラウザでは、ime-mode・type=telで入力方式を制御できます。数字入力用のtype=telは高シェア、全角・半角制御のime-modeはPCならまずまず高シェアです。
type=numberはJavascriptで取得不能、強制バリデーション作動、送信ができるのに取得できないブラウザもあるため、使わないほうが無難です。
type=url/email/patternはバリデーションが動作するため、入力制御目的では利用できません。バリデーションをクロスブラウザ化することを考慮すると、使わないほうが無難です。
pattern属性はバリデーション用で、入力制御目的では利用不可。バリデーションをクロスブラウザ化することを考慮すると、使わないほうが無難です。
list属性の対応ブラウザはシェア半数ほどで、未対応ブラウザに無害なので使えます。
inputmodeは最も期待を持たせる仕様ながら、現時点（2016年9月）では全く利用できません。

この他、iOSでは半角入力時に1文字目が自動で大文字になるのを避ける「autocapitalize」を必要に応じて利用しましょう。

@mamewazacomさんのツイート



2016/9/12

初回投稿日は2016/6/18