HTML5.1のinputmode属性の対応状況について

HTML5.1のinputmode属性の対応状況について

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

どうも、さむらいです。
当社ASPサービスのフォームアシストの機能に、キーボード最適化というものがございます。

スマホ向けに入力欄に合わせて最適なキーボードを出す機能なんですが、その機能拡張のためにちょっと調べてみました。HTML5.1で定義されているinputmode属性の対応状況を。(倒置法)

そもそもinputmodeって?

inputタグに設定可能な HTML 5.1 で定義されている追加の属性です。この属性に指定可能な内容は以下の通り(一部だけ抜粋)
ここにすべての定義が記載されています

非散文コンテンツの英数字ラテン文字入力、たとえばユーザー名、パスワード、製品コードなど。verbatim
一部のタイピング補助対応(たとえばテキスト予測など)をともなう、ユーザーの優先言語でラテンスクリプトを入力する。自由形式テキスト検索フィールドなど、人間とコンピュータのコミュニケーションを意図する。latin
漢字に変換するためのサポートとともに、全角文字を使用する、かなやローマ字入力、一般にひらがな入力。日本語テキスト入力を対象とする。kana
0から9までの数字、ユーザーの好みの桁区切り文字、および負数を示す文字のためのキーを含む、数値入力。たとえクレジットカード番号などの、数値コードを意図する。(番号については、"<input type=number>"を優先する。)numeric
0から9までの数字、"#"文字、および"*"文字のためのキーを含む、電話番号入力。一部のロケールで、これはまた、アルファベットのニーモニックラベル(たとえば、米国で、"2"キーはまた、歴史的に文字A、B、およびCで標識されている)を含むことができる。まれに必要。"<input type=tel>"を代わりに使用する。tel
"@"文字および"."文字のような、電子メールアドレスの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力。まれに必要。"<input type=email>"を代わりに使用する。email
"/"と"."文字、"www"や".co.uk"のようなドメイン名の中で見つかった文字列を簡単に入力するための、ウェブアドレスの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力。まれに必要。"<nput type=url>"を代わりに使用する。url
行数稼ぎ終わり。

当社サービスに関連ありそうな設定値だけピックアップしましたが、上記のうちtelやemailは<input type=”***”>でも指定できるので、当記事では<input type=”text”>の時に指定可能な verbatimについて、どのOSのブラウザが対応しているのかを調査してみました。
ちなみに読み方は「バーベイタム」です。

iOS9.0.2 Safari

image03

結果:NG
ご覧のとおり通常の日本語入力モードになっています。パスワード入力欄には半角英数字だけを入力させたいので、これじゃあ使えませんね。諦めましょう。

Android 4.4.2 Chrome

image05

結果:NG
ご覧のとおり通常の日本語入力モードになっています。パスワード入力欄には半角英数字だけを入力させたいので、これじゃあ使えませんね。諦めましょう。(コピペ)

そして結論へ

 最初のverbatimからいきなりブラウザ未対応だったため、なんだかテンションだだ下がりで、他の属性値を試す気にならなかったんですが、inputmode属性の対応はもう少し先になりそうですねー。

 調査したどこかのサイトでも書いてましたが、海の向こうの人たちはマルチバイト対応なんて考えてないんじゃないかと思う。(英語で入力できりゃいいんだろ、的な)

 HTML5はだいぶ広まってきたと感じていますが、まだまだブラウザ対応は規約の策定に追いつかないですね。確かに開発するのには時間がかかるもんですけど。

 でもAppleさんなら らくしょーですよね。早めに対応お願いしまーす。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

  • LocalStorageについておさらい どうも、さむらいです。 一時期、当社サービスの仕様を確定させるために、LocaStorageについて色々調査しておりました。 今、ちょっと企んでいることがありますので、今回はそれに先駆けて LocalStorage の …
  • HTMLを使って会話するコツ Hey, guys! こんにちは、カオツです。 日本人なのになんで英語なんて勉強しなきゃいけないの。 とか言ってられない時代になりましたね。 海外の人とコミュニケーションをとりたいから英語を勉強する。 機械とコミュニケ …
  • 『iOS11』の「CoreNFC」でサンワサプライ社製のタグを読み込んでみた 前回は『iOS11』新搭載の「Core ML」を試してみました。 <bitWave関連記事『「iOS11」新搭載の「Core ML」を駆使してMNISTの手書き数字認識を試してみた』> しかし、私の『iOS11』に …
  • LINEでセキュリティ対策!? 6月末にイノベーションテクノロジー本部主催で「第1回ハッカソン(※)」が開催されました。 テーマは『新たなLINE-BOTを生み出す』。 全16人のメンバーを4チームに分けた社内初の“チーム戦”です。 全チームが通常業務 …