フォームの入力補完機能Autocompleteを無効にする方法

フォームの入力保管機能は便利ですが、サイトの構築内容によっては、思わぬ妨害にもなってしまう場合があると思います。
そこで今回は、フォームの入力保管機能であるAutocompleteを無効にする方法について紹介していきます。

html側でフォームのAutocompleteを無効にする方法

■フォーム全体にAutocompleteを無効にする場合
下記ソースとなります。

<form autocomplete="off"></form>

■一部の入力項目にAutocompleteを無効にする場合
下記ソースとなります。

<input type="text" autocomplete="off">

 

MW WP FORMでAutocompleteを無効にする方法

それではWordpressのメールフォームプラグインでは、どのように設定すればいいのか紹介します。

今回は「MW WP FORMプラグイン」を例に紹介します。
特にMW WP FORMを使用時に、入力補完機能がDatepickerを隠してしまう現象があるので、そのためにも参考にしていただければと思います。

調べてみたところMW WP FORMでは、Autocompleteを無効にする方法がプラグイン側の設定ではないようです。
※もし設定があるようでしたら、すみません^^;

そこで、JQueryを使ってAutocompleteを無効にしていきます。
下記が無効化するソースとなります。

$(function() {
    $('form .hasDatepicker').attr('autocomplete', 'off');
});

上記のコードで、Datepickerが使用されている箇所のみAutocompleteが無効化されます。
それ以外の入力箇所は、Autocomplete機能を活かすことができるので、便利り利用できるかと思います。

おすすめの記事