【HTML】iOSデバイスで入力すると先頭が大文字になる件

iPhoneやiPadのようなiOSデバイスで英語文字入力をする際、先頭の小文字が大文字になってしまう事があります。
小文字しか入力しないinputタグの場合、この機能が煩わしく感じます。

今回はこの機能を止める方法です。

原因

タグに付与するautocapitalize属性が原因です。
この属性は初期状態が有効なので、何も対策を取らないと勝手に変換します。

developer.mozilla.org

回避策

回避策は2つあります

1. autocapitalize属性を無効にする

タグのautocapitalize属性を無効にする事で自動変換を止める事ができます。

<input type="text" autocapitalize="off">

See the Pen GRoXQYN by shibainu (@websandbag) on CodePen.

2. type属性を適切なものに変える

HTML5では、type属性に指定できるタイプが増えました。

developer.mozilla.org

この中で、autocapitalize属性が初期状態で無効なtype属性は次の通りです。

  • email
  • url
  • password

この属性に関しては、先頭が小文字のまま入力できます。

See the Pen autocapitalizeの例外 by shibainu (@websandbag) on CodePen.

©︎2017-2018 WebSandBag