皆様、こんにちは
制作部 カワサキです。
最近実装した備忘録シリーズです。
フォームでスマホからアクセスした際に
電話番号の入力項目にカーソル遷移したい際に
ポップアップキーボードのデフォルト表示を「数字」にしたい時
<input type=”number”>
が手っ取り早くて簡単なんですが
この設定をして、PC表示で見てみると(クロムで見ると)
入力項目の右側に加算・減算用の矢印が表示されてしまいます。
電話番号入力で加算・減算というのも何だかな~という事で
<input type=”text” inputmode=”tel”>
これで解決!!
ちなみにMWフォームで入力項目に「inputmode」を追加する時は
function.phpに、ショートコードのタグを書き換えるフィルターを定義してあげればOK
function my_do_shortcode_tag_tel( $output, $tag, $attr, $m ) {
if ( $tag == ‘mwform_text’ && $attr[‘name’] == ‘phone_number’ ) {
$output = rtrim( substr( $output , 0 , -3 ) ) . ‘ inputmode=”tel” />’ . “\n”;
}
return $output;
}
add_filter( ‘do_shortcode_tag’, ‘my_do_shortcode_tag_tel’, 10, 4 );
これで、無事に
<input type=”text” inputmode=”tel”>
が表示されます。
Contactフォームの時は
調べときます・・・・