技術ブログ
ページを開くたびにフォームの自動補完が煩わしくなる場合、ページを移動したタイミングでフォームをリセットするスクリプトを活用できます。
この方法では、ページのリロードを検知し、自動的にリセットが行われるため、ユーザーに手動で操作させる必要がありません。
実現方法
このスクリプトは以下の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マーケティングなどのサービスをご紹介しています。