0
0

More than 1 year has passed since last update.

スマホで電話番号入力の際に数字のキーボードを出す(jQuery)

Posted at

WordPressのプラグイン「MW WP Form」で、電話番号入力の際にスマホで数字キーボードを出したい!
そう思ったときによくあるのは、functions.phpに下記を追加するというもの

functions.php
function my_do_shortcode_tag(   ) {
    if ( $tag == 'mwform_text' && $attr['name'] == 'hoge' ) {
        $output = rtrim( substr( $output , 0 , -3 ) ) . ' inputmode="tel" />' . "\n";
    }
    return $output;
}
add_filter( 'do_shortcode_tag', 'my_do_shortcode_tag', 10, 4 );

うまくいった!と思ったのですが…
バリデーションで入力エラーが出た後にもう一度入力しようとすると、数字のキーボードが出なくなりました…

type属性をtelにしたらなんか入力項目が分割されてしまうし…
なにか方法がないかな〜と調べてたところ、どうやら inputmode="tel" だと数字のキーボードがでるということがわかった(いまさら…)

ならば発想を変えてjQueryとかで属性入れられないかなと思ったらできました。

<input type="text" class="tel">
$('.tel').on('focus', function () {
  $(this).attr("inputmode", "tel");
});

これで入力エラー後でもちゃんと数字キーボードがでました!
たぶんこれで支障はないと思いますが…
なにか支障がありそうであれば教えて下さい〜:bow:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0