input要素にソフトウェアキーボードを非表示/表示しない方法

  • このエントリーをはてなブックマークに追加
  • Pocket

input要素にjQueryのプラグインでテンキーやデータピッカーなどを設置する場合があると思います。

しかし、iPhone/iPadやAndroidのスマホ、タブレットでinput要素をタップすると、ソフトウェアキーボードが表示されてしまいます。

今回は、iPhoneやAndroidでソフトウェアキーボードを非表示にする/表示しない方法について紹介します。

ソフトウェアキーボードが表示される例

各input要素にjQueryプラグインのピッカーを設置した状態を例とします。

PCのブラウザ上でinput要素をクリックした場合は、次のようにピッカーのみ表示できます。

しかし、スマホやタブレットでタップすると、次のようにソフトウェアキーボードが表示されてしまいます。

readonly属性を設定して対策する

スマホ・タブレットでinput要素をタップ時にソフトウェアキーボードを表示しないようにする場合は、readonly属性を設定します。

input要素に直接記述する場合は、次のとおりです。

#HTML
<input type="text" name="name" readonly="readonly" />

複数のinput要素でソフトウェアキーボードを表示しない場合は、jQueryのattr()で次のように指定することもできます。

#JavaScript
$(".class input").attr('readonly', 'readonly');

上記の指定後、スマホ/タブレットでinput要素をタップすると、jQueryプラグインのピッカーのみ表示することができます。

iOSのフォーカス時のズームも無効にする

iOSのフォーカス時のズームが気になる場合は、スタイルシートでinput要素のフォントサイズを16px以上にします。

フォントサイズを大きくしたくない場合は、scaleで見た目の大きさを調整します。

#CSS
.class input[type=text] {
font-size: 16px;
transform: scale(0.9);
}

以上で、スマホやタブレットでinput要素のソフトウェアキーボードを非表示にすることができます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)