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状態を正しくするとか。