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

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

実現方法

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

リロードのタイミング

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

キャッシュの影響

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