WordPress

Contact Form 7 でinput要素にtel 属性等入れてスマホ最適化する方法

英数字の入力時にスマホのキーボードが自動的に変わるようにする方法。

プラグインからは設定できないので、html5の属性をjQueryでいれるようにします。
具体的には、Contact Form7でinputを作る際にidをふり、そこに対してjQueryでtype属性を指定。

下記のようなjQueryをヘッダー部に入れておく。

<script type="text/javascript">
jQuery(function(){
jQuery('input#telephone').prop('type','tel');
jQuery('input#form_email').prop('type','email');
});
</script>

====

※検証メモ
・普通は属性変更は .attr() を使うみたいだけど、これだと変わらなかった。
・inputにかけるのはclassだと変更ができなかった。

Previous Post Next Post

You may also like

Leave a comment

Leave a Reply