ページを開く度に入力フォームをリセットするスクリプト | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

技術ブログ

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

2024.12.26.

Java Script

X Facebook Pocket LINE はてブ

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

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

実現方法

このスクリプトは以下の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 などの代替手段を検討してください。

リロードのタイミング

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

キャッシュの影響

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

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

板浪雅樹 のアバター

経歴: 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当

X Facebook Pocket LINE はてブ
WEB無料相談