« Eclipse で作成したプロジェクトを Tomcat で公開する | トップページ | Eclipse コンパイル時の警告を無視する方法 (都度更新) »

2011年2月18日 (金)

JavaScript によるキーイベントの禁止 (修正)

キーイベントで色々なキーの禁止を実装してみたので
そのソースを貼り付けます。

■今回の仕様

  • BackSpace、Art+右 による戻るを禁止
    (入力ミスによるページ遷移を防止。明示的な戻るボタンは許可)
     
  • Ctrl+R 、F5 キーによる更新を禁止
    (入力ミスによる更新を防止。明示的な更新ボタンは許可)
     
  • Enter キーによる Post(送信)処理を禁止
    (入力ミスによる送信を防止)

■ソース

以下のソースを JavaScript の定義部分に張り付けてください。

共通的な処理にしたい場合は外部ファイルにして、読み込むと便利♪

window.document.onkeydown = keys;

/**
 * BackSpaceキー、Enterキー、Alt+←、Ctrl+R、F5キー の禁止
 * @returns {Boolean}
 */
function keys(eve){

 // IE と FireFox の両方のイベントを受け取る為の処理
 var winjudge = false ;
 if(eve==null){
  eve = window.event ;
  winjudge = true ;
 }

 // IE と FireFox の両方のキーコードを受け取る為の処理
 var keyCode = eve.which ? eve.which : eve.keyCode ;
 switch ( keyCode ){

   case 8: // BackSpace

    // ※2011/11/17 修正 --------------------------
         //  (IDを直接取得するように修正)
    //  IE と FireFox の両方の要素名を受け取る為の処理
    if(eve.srcElement){
     idname = eve.srcElement.id;
    }else{
     idname = eve.target.id;
    }
    // -------------------------------------------

    // ID(id)が定義されている場合
    if(idname != undefined ){

     type = document.getElementById(idname).type ;
     actv = document.getElementById(idname).disabled ;

     // text の場合のみ BackSpace を許可する
           // ※textareaが存在する場合はその対応を入れてください

     if(type=="text" && actv == false){
      return true ;
     }else{
      // win 系の場合 キーコードに 0 を設定
      if(winjudge) eve.keyCode = 0;
      return false;
     }
    }else{
     if(winjudge) eve.keyCode = 0;
     return false;
    }

   case 13: // Enter

    if(winjudge) eve.keyCode = 0;
    return false;

   case 37: // Alt + ←

    if( eve.altKey ){
     if(winjudge) eve.keyCode = 0;
     return false;
    }

   case 82: // Ctrl + R

    if( eve.ctrlKey ){
     if(winjudge) eve.keyCode = 0;
     return false;
    }

   case 116: // F5

    if(winjudge) eve.keyCode = 0;
     return false;
     break;

 }
}

※うまく動作しない場合

 1.[ツール]メニューより [開発者ツール] を選択

 2.[スクリプト]タグを選択し、[デバッグ開始] ボタンを押す

 3.ブレークポイントを挿入し、対象の操作を行う

 4.開発者ツールの右側[ウォッチ]に変数名を入力

 5.変数の値を確認して、バグの原因を取り除いてください

■今回の確認した環境

IE 8.0.6001.18702
Firefox 3.5.16
Google Chrome 8.0.552.237

※上記以外では確認していないため、使用ブラウザ毎に確認することをお勧めします

« Eclipse で作成したプロジェクトを Tomcat で公開する | トップページ | Eclipse コンパイル時の警告を無視する方法 (都度更新) »

コメント

サイト制作の依頼を受けており、コピペなどができないものを、と頼まれています。
基本的にMac、Win、iphoneなどでほとんどのブラウザで禁止にはできたのですが、
Firefoxのみマックならcommand+A、WinならCtrl+Aが制御できません。
ここで紹介されているものを用いて対策できるのでしょうか?

すみませんがご教示いただけますと幸いです。
よろしくお願いします。

日数がたっていますので、解決したかもしれませんね。
こちらに同じ環境が無いので確認はできませんが、
イベントキーをアラートで表示し、個別に制御するとできるかもしれません。

その場合、ブラウザ等環境を指定して制御しないと
他にも影響があるかもしれませんので注意してください。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/153605/50903451

この記事へのトラックバック一覧です: JavaScript によるキーイベントの禁止 (修正):

« Eclipse で作成したプロジェクトを Tomcat で公開する | トップページ | Eclipse コンパイル時の警告を無視する方法 (都度更新) »