ページを開く度に入力フォームをリセットするスクリプト

投稿日:2024.12.26.
更新日:2025.04.12.

Java Script

株式会社TREVOの月額制ホームページ制作サービス
PR

板浪 雅樹
執筆・編集 板浪 雅樹

2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。

2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ/プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4/Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味/強み:筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー:「サイトは資産。改善を止めた瞬間から価値は目減りする」

ページを開くたびにフォームの自動補完が煩わしくなる場合、ページを移動したタイミングでフォームをリセットするスクリプトを活用できます。
この方法では、ページのリロードを検知し、自動的にリセットが行われるため、ユーザーに手動で操作させる必要がありません。

実現方法

このスクリプトは以下の2つの機能を活用しています。

1.window.performance.navigation.type を使用してリロードを判定

ページがリロードされたかどうかを判定します。

2.ブラウザの「戻る」ボタンやキャッシュからの再表示を示します。

location.reload() でページをリロード
リロードを実行して、フォームの状態をクリアします。

サンプルコード

<script type="text/javascript">
  window.addEventListener('pageshow', () => {
    if (window.performance.navigation.type === 2) {
      location.reload();
    }
  });
</script>

解説

  • window.addEventListener('pageshow', ...)
    ページが表示されたタイミングで実行されるイベントリスナーを設定します。これにより、ページの「戻る」操作やキャッシュからの再表示も捕捉できます。
  • window.performance.navigation.type === 2
    ブラウザがキャッシュからページを再表示した場合に一致します。この場合、location.reload() をトリガーしてページを再読み込みし、フォームをリセットします。
  • location.reload()
    ページをリロードすることで、フォームの自動補完をリセットします。

注意事項

ブラウザの互換性

window.performance.navigation.type はブラウザによって実装状況が異なる場合があります。PerformanceNavigation インターフェイスが非推奨になる可能性もあるため、将来的には PerformanceNavigationTiming などの代替手段を検討してください。

リロードのタイミング

この方法ではページが再表示されるたびにリロードが発生するため、ページの読み込みが頻繁に行われるサイトでは適切でない場合があります。

キャッシュの影響

特にモバイル環境では、キャッシュによる高速表示が妨げられる場合があります。リロードの使用が適切かどうかを慎重に検討してください。

関連の記事

お問い合わせ
CONTACT

ホームページ制作に関することなら
お気軽にご相談ください

お電話でのお問い合わせはこちら

0120-838-567

平日9:00~18:00まで 定休日:土 日 祝