屁孩博客:ページを離れるヒントページの修正内容を保存するかどうかの簡単な実現
2317 ワード
多くのシステムでは、いくつかの情報を変更した場合、保存せずに現在のページを離れると、「情報が変化し、保存するかどうか」などのプロンプトが表示されます.例えば、QQの中の个人の基本资料を変えて、“确认”あるいは“応用”のボタンをクリックしないで、直接“キャンセル”して、システムは“あなたはすでに设定に対して修正をして、保存しますか?”このような友好的なヒントは、お客様の体験においてソフトウェア/システムを彩ることが多いが、このような機能はどのように実現されるのだろうか.JSで制御する簡単な方法を紹介します.次のコードを見てください.
上のコードでは、まずフラグビット「changeFlag」を定義し、Jquery設定でページ内の「テキストボックス」と「テキストドメイン」が変化するときにフラグビット「changeFlag」の値をtrueに変更し、最後にformフォームのコミット、ハイパーリンクなどのページがジャンプするときにwindowを設定.onbeforeunloadは、フラグビット「changeFlag」の値の検証を開始し、対応するヒントを与えます.
その中でwindow.onbeforeunloadは、ページのリフレッシュまたはクローズ時に呼び出され、サーバに新しいページを読み込もうとしたときに呼び出され、まだ読み取りが開始されていません.
ページbodyの部分コードは以下の通りです.
ページの「アカウント」、「パスワード」、「コメント」の3つのいずれかが変更されると、リフレッシュ、コミット、ポイントリンクが表示されます.他のラジオボタン、チェックボックスなどは自分で修正すればいい!
詳細については、おしりのブログを参照してください.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var changeFlag=false;
// ， true，
$(document).ready(function(){
//
$("input[type='text']").change(function(){
changeFlag=true;
});
//
$("textarea").change(function(){
changeFlag=true;
});
});
//
window.onbeforeunload = function() {
if(changeFlag ==true){
// changeFlag true
if(confirm(" ， ？")){
// ...
alert(" ...");
}else{
// ...
alert(" ...");
}
}
}
</script>上のコードでは、まずフラグビット「changeFlag」を定義し、Jquery設定でページ内の「テキストボックス」と「テキストドメイン」が変化するときにフラグビット「changeFlag」の値をtrueに変更し、最後にformフォームのコミット、ハイパーリンクなどのページがジャンプするときにwindowを設定.onbeforeunloadは、フラグビット「changeFlag」の値の検証を開始し、対応するヒントを与えます.
その中でwindow.onbeforeunloadは、ページのリフレッシュまたはクローズ時に呼び出され、サーバに新しいページを読み込もうとしたときに呼び出され、まだ読み取りが開始されていません.
ページbodyの部分コードは以下の通りです.
<body>
<form action="">
：<input type="text" name="username"/><br/>
：<input type="text" name="password"/><br/>
：<textarea rows="3" cols="17"></textarea>
<input type="submit" value=" "/>
</form>
<a href="http://www.pihai.me"> </a>
</body>ページの「アカウント」、「パスワード」、「コメント」の3つのいずれかが変更されると、リフレッシュ、コミット、ポイントリンクが表示されます.他のラジオボタン、チェックボックスなどは自分で修正すればいい!
詳細については、おしりのブログを参照してください.