コーディング

MWフォームで入力項目に「inputmode」を指定する

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

皆様、こんにちは

制作部 カワサキです。

最近実装した備忘録シリーズです。

 

フォームでスマホからアクセスした際に

電話番号の入力項目にカーソル遷移したい際に

ポップアップキーボードのデフォルト表示を「数字」にしたい時

<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フォームの時は

 

 

調べときます・・・・

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