JavaScriptの(バッド)ノウハウ
Webアプリを開発する際にJavaScriptで色々と操作性を向上させたりするが、その逆にユーザの操作を制限するということもある。言ってみればバッドノウハウ。色々あるみたいだけど、私もよく知らなくて、人から教わりました。
ボタン二度押し回避
var once_submitted = 0; function doSubmit() { if (once_submitted == 1) return false; once_submitted = 1; return true; }
みたいなの。
ブラウザの戻る機能の抑止
これをやるには色々とあるらしく
- キー操作の抑止onKeyEventでBackSpaceやAlt+←などを拾う。
<BODY onKeyDown="return onKeyEvent(event);" onKeyPress="return onKeyEvent(event);" >
- マウスの右クリックでのコンテキスト メニュー抑止
<HTML onContextMenu="return false;" >
キーボード操作のShift+F10もこれで抑止できるみたい。
- ツールバー・メニューなどを消す。
"menubar=no,location=no,status=no,toolbar=no,resizable=yes,scrollbars=yes"
みたいなのをどこかに指定する。
- さらにJavaScriptではないが、サーバ側でキャッシュ無効化ヘッダを出す必要がある。ただこれはPHPではSessionを使用していると自動的に出力されるみたい。
ブラウザの戻るに対応するのも色々やっかいだ。
キー操作の抑止
キー操作の抑止には時と場合によって必要なものが色々あり、他にも
- F5やCtrl+Rのリロード抑止
- 新しいウィンドウを開くCtrl+N抑止
- サイドバーのCtrl+H, I, E抑止(サイドバーが開いているとそこで戻れたりF5が押せたりするので)
など。他にも色々と必要なものがあるらしい。もちろん、いつもこれらを抑止するというわけではなく、場合によっては利用可能にしたいこともある。詳しくはIEのヘルプで「キーボード ショートカット」を見ればいいのかな?
それにしても、例えばブラウザがファイルをロード中にESCキーやF5キーを連打するとか、されると結構駄目みたい。完全にユーザのどんな操作でも問題ないようなアプリケーションにはすることができない。そこまでやるならリッチクライアントになるのか?
onReset
これはユーザ操作の抑止ではないけど、Form内でESCが押された場合の動作を書く。
<FORM onReset="onFormReset();" >
フォーム内でESCが押されるとフォームがクリアされるので、JavaScript内で状態を維持している変数があればもリセットする必要がある。ボタンのdisabled状態を正しくするとか。