ブラウザでは戻るボタンを使用して戻って来た場合にフォームの値を入力した状態で表示してくれます。
便利なものですが、時にはフォームの値を残したくない場合もあるでしょう。(私はありました)
今回はJavaScript (jQuery)を使用してフォームの値をクリアする方法を残したいと思います。
調べていた際に知った、読み込み順についてのお話もここでできたらと思います。
フォームをクリアする
ブラウザの戻るボタンが押されて特定のページに戻ってきた場合にはキャッシュが使われるせいか、通常のように読み込まれないです。
なので以下のように記述してもフォームの値はクリアされません。正確に言うと、以下が実行された後にキャッシュで値が戻されてしまいます。
jQuery(document).ready(function() {
$('input[name="inputName"]').val('');
});
そこで、読み込むときを遅らせて次のようにします。(後述の通りreadyよりloadのほうが遅く読み込まれます)
$(window).load(function() {
$('input[name="inputName"]').val('');
});
$(window).loadを使用すると、全てが読み終わった後に呼ばれます。
キャッシュで値がセットされた後に、関数が呼ばれ、フォームがクリアされるというわけです。
jQueryの書き方と読み込まれるとき
ついでに、書き方による読み込みの順番が気になったので調べてまとめてみました。(同じように読み込み順による不具合があった場合には参考になるかなと思います。)
HTML読み込み終了時に読み込まれるもの
以下はHTMLの読み込みが完了した時点で読み込みがされるようです。
jQuery(document).ready(function() {
// 処理 });また、頭のjQueryは$と省略できますので、以下も同じ意味になります。
$(document).ready(function() {
// 処理
});
また、上記の省略形として以下があります。
jQuery(function() {
// 処理
});$(function() {
// 処理
});
関数内で$を使うことを明示的に示す以下のような書き方もあるようです。
jQuery(function($) {
// 処理
});$(function($) {
// 処理
});
ちなみに、ここの引数は$でなくても指定したものが使えます。
jQuery(function(aaa){
aaa('.class').val();
});
完全に画面の表示が終わったあとに読み込まれるもの
HTML読み込み終了時の実行だとまだ画像などの描写が終わっていない状態になっています。
その状態でjQueryを実行してもまだ準備できていないものに対しての処理ができなかったりします。
そんなときに、使えるのが以下のもの。
jQuery(window).load(function() {
// 処理
});
$(window).load(function() {
// 処理
});
こちらはready時には読み込まれていなかった情報の準備を待つ、つまり、readyよりも後に読み込まれます。
それより後の読み込みの場合
私は1度だけ上記のloadを使ってもダメだったことがありました。
その時は、素直にdelayで遅延させてやりました。
$(window).load(function() {
$('.class').delay(500).queue(function() {
val('');
});
});
これに関しては最善ではない書き方だと思っていますが、もしいいやり方があれば教えていただきたいです…
最後に
私はjavaScriptにあまりなれていないので、あれ実行されないなと思うことが何度もあったのですが、だいたいこの読み込み順番を知らなかったことに起因していたと思います。
ここではjQueryでの書き方で紹介しておりますが、素のjavaScriptでの書き換えもありますし、フレームワークでも同様の書き方があるかと思いますので、対応したもので調べてみてください。
私自身javaScriptは全然習得できていない状態なので、参考程度にお願いします！
ではー。