2008/09/15

JS:: 画面のロック

フォーム画面に各種情報を入力、サブミットした瞬間に画面を触られたら・・・というよくあるお話。
現にやられてしまい、画面のロックをするようにしました。

画面のロックはjQuery+jQuery BlockUI pluginを使いました。

■画面のロック
 ・jQueryおよびjQuery BlockUI pluginのJSファイルをインポート
 ・onclickイベントで実行する関数に$.blockUI()を記述。
  その後に、submit()なりをすれば応答が返ってくるまで画面をロック

 ※画面のロックをしてもブラウザの操作(F5や戻るボタン)は有効なので、
  触らないでね!というメッセージは必要ですな。


このやり方はiframe内で行いたかったんですが、うまくいきませんでした・・・ショボン
なので、こんなやり方で対応しました。
■innerHTMLで画像を表示
 ・onclickイベントで実行する関数にinnerHTMLを使って押したボタンを消し、代わりに「実行中」の画像に差し替える
 ・差し替えた後に、タイマー関数setTimeout(関数,ミリ秒)でサブミットを実行

 ※タイマーをかけないと、画像がうまく表示されませんでした。
  念のため、画像を先読みしたけど改善されず・・・
スポンサーリンク

スポンサーリンク