フォームの自動入力候補表示機能をＯＦＦにする

2019年9月27日

　最近のブラウザは今までの入力内容から予測して、自動で入力候補を表示してくれる便利な機能があります。

テキストボックスなどノーマルな場合はよいのですが、一部のフォームでは、その機能がかえって不便になることがあります。

今回、入力フォームを調整していたところ、自動入力候補表示機能が邪魔になるケースがありました。

調べて、自動入力候補表示ＯＦＦにすることができたので備忘録として記録します。

現象はこのような感じです。

フォームをクリックするとカレンダーが自動で表示されるようにしているケースで、自動候補表示されると、カレンダーの一部が見えなくなります。

前月表示ボタンが隠れ、押せませんでした。
とても邪魔なため、これをカットすることにしました。

自動入力候補表示ＯＦＦのやり方

通常フォームは以下のようになっています。

<formaction=""method="post"><inputname="date"type="text"><inputname="name"type="text"><inputname="送信"type="submit"></form>Code language:HTML, XML(xml)

自動入力候補をＯＦＦにしたい部分に、「autocomplete」を設定します。

<formaction=""method="post"><inputname="date"type="text"autocomplete="off"><inputname="name"type="text"><inputname="送信"type="submit"></form>Code language:HTML, XML(xml)

これで、「date」には自動入力候補が表示されなくなります。

一括してすべてのフォームの自動候補候補をＯＦＦにする場合

入力欄が多い場合、ひとつづつ設定するのが面倒な場合は、一括して設定する方法があります。

<formaction=""method="post"autocomplete="off"><inputname="date"type="text"><inputname="name"type="text"><inputname="送信"type="submit"></form>Code language:HTML, XML(xml)

<form>タグに　autocomplete を設定すれば、<form>タグ内のフォームはすべて自動候補表示がＯＦＦになります。

思ったよりも簡単なことで対応できました。
ただ、ＨＴＭＬ５の命令であるため、一部のブラウザによっては非対応があるかもしれません。

ただ、明らかに邪魔になるケースでは、設定したほうが良いです。

---

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。

関連記事