inputmode=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

inputmode属性は、input要素やtextarea要素、およびcontenteditable属性が指定された要素に対する入力モードを指定します。

  • これはソフトウェアキーボード向けの機能です。物理キーボードによる入力には影響しません。

<input inputmode="search">
属性 値
グローバル属性
inputmode="" 入力モードを指定 none ソフトウェアキーボードを表示しない
text テキストの入力
tel 電話番号の入力
url URLの入力
email メールアドレスの入力
numeric 数値の入力（PIN入力などに役立つ）
decimal 実数の入力（小数入力に役立つ）
search 検索語の入力
  • none の指定は、独自のキーボードを表示する際に役立ちます。

inputmode属性の動作

inputmode属性を指定すると、ソフトウェアキーボードのキー配列が入力内容に適したものに切り替わります。

例えば inputmode="url" を指定した場合は、/ . www .com などのキーがキーボード上に表示されることが期待されます。

この属性を指定しない（またはブラウザが未対応）の場合は、入力欄のtype属性やpattern属性などの情報に基づいて、最適なキーボードが表示されるようです。

inputmode="url" を指定した際の問題点？について

日本語入力が可能なキーボードの場合、inputmode="url" を指定した入力欄では、ローマ字入力ではなく日本語入力がデフォルトになってしまうことがあります。

  • この挙動は、日本語ドメインの存在が関係しているようです。

指定できる要素

inputmode属性はグローバル属性のため、全てのHTML要素に指定することができます。

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML LS：一部の要素に定義されていたinputmode属性が、グローバル属性として再定義されました。

使用例

https://www.tagindex.com/html/attribute/inputmode.html スマートフォンなどで確認する場合はこのQRコードを読み取ってください。
各種の値を指定した例

<p>none<br>
<input inputmode="none"></p>

<p>text<br>
<input inputmode="text"></p>

<p>tel<br>
<input inputmode="tel"></p>

<p>url<br>
<input inputmode="url"></p>

<p>email<br>
<input inputmode="email"></p>

<p>numeric<br>
<input inputmode="numeric"></p>

<p>decimal<br>
<input inputmode="decimal"></p>

<p>search<br>
<input inputmode="search"></p>
表示例

none

text

tel

url

email

numeric

decimal

search

textarea要素で使用した例

<p>数値の入力</p>
<p><textarea cols="30" rows="5" inputmode="numeric"></textarea></p>
表示例

数値の入力

contenteditable属性を指定した要素で使用した例

<div contenteditable="true" inputmode="numeric">
0123456789
</div>
表示例
0123456789