JS onkeypress互換記述法_javascriptスキルを詳しく解説

バックグラウンド イベントをトリガーするには、パスワードを入力して Enter キーを押す必要があります。非常に単純な要件のように見えますが、多くの問題に遭遇します。

HTML コンテンツには主に、パスワード入力テキスト ボックスとバックグラウンド イベントをトリガーするボタンが含まれています。

1. TextBox テキスト ボックスにフォーカスが当たったら、Enter キーを押すだけでページが更新されます。
コードを注意深く調べた結果、ページ上にテキスト ボックス コントロールが 1 つしかない場合、Enter キーを押すとページが更新されることがわかりました。
解決策: 非表示の TextBox コントロールをページに追加します。
具体的な原理は不明！

2. Jquery を使用してメソッドを実装します。

 $(document).ready(function(){
  $("#tbPassword").focus();
  $('#bPassword').keydown(function(e){     
    if(e.keyCode == 13){ 
      $("#ctl00_ContentBody_btnAccept_linkButton")[0].click();
    }    
  });
  });

3. 諸事情により Jquery の実装方法が使用できないため、代わりに JS を使用する必要があります。その互換性が最も問題です。

  document.getElementByIdx_x_x("tbPassword").onkeypress = function(event){
    var keynum;
    if(window.event) // IE
    {
     keynum = window.event.keyCode;
    }
    else if(event.which) // Netscape/Firefox/Opera
    {
     keynum = event.which;
    }
    
    if (keynum == 13)
      document.getElementByIdx_x_x('ctl00_ContentBody_btnAccept_linkButton').click();
  }

説明:

IE でのキーボード キーの読み取り:

keynum = event.keyCode; // 字母d,keynum=100
    keychar = String.fromCharCode(keynum); // 将keynum转换成字符d

FireFox でキーボード キーを読み取る:

 keynum = event.which; // 字母d,keynum=100
    keychar = String.fromCharCode(keynum); // 将keynum转换成字符d

たとえば、IE には keyCode 属性のみが存在しますが、FireFox には what 属性と charCode 属性があり、Opera には keyCode と what 属性などがあります。

したがって、この互換性の問題は Jquery で解決されました。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。