javascript - ネイティブ JavaScript の Keypress 関数

Question

以下は私のコードです：

$(document).keypress(function(e){
  var s = String.fromCharCode(e.which);
  if ( s === "f"){
    alert ("its f");
  }
  else if ( s === "r"){
    alert ("its r");
  }
});

これをJavaScriptでやりたい…………!!

これどうやってするの ？

Answer 1

document.addEventListener('keypress', function(e) { 
  var key = e.keyCode || e.which;
  ... // rest of code
});

Answer 2

ネイティブ js では、onClick、onKeyPress などの要素属性を介してイベントをアタッチできます。イベント ハンドラー関数のイベント パラメーターを忘れないでください ;) さまざまなブラウザーでは、イベントのさまざまな属性を介して、押されたキーのコードを読み取ることができます。

以下に例を示します。

<script type="text/javascript">
  document.getElementsByTagName("body")[0].onkeypress=function(e){
       var s = String.fromCharCode(e.which | evt.witch );
       switch(s){
           case "f":
              alert("key is 'f'");
              break;
           ....
       }
   };
</script>

またはaddEventListener、次のようにメソッドを使用できます。

<script type="text/javascript">
     document.getElementsByTagName("body")[0].addEventListener('keypress',function(e){
       var s = String.fromCharCode(e.which | evt.witch );
       switch(s){
           case "f":
              alert("key is 'f'");
              break;
           ....
       }
     });
</script>

これらのスクリプトは、ドキュメントがロードされた後に実行する必要があります。domready次のようにイベントをサブスクライブできます。

<script type="text/javascript">
       document.addEventListener( "DOMContentLoaded", function(){
           //your code here  (one of the above)
       }, false );
</script>

この最後のセクションについては、ここで説明します: javascript domready? . 残念ながら、クライアント ブラウザによって異なる方法で domready イベントをサブスクライブできます。

提案 (オフトピック):

ネイティブの JavaScript を使用すると、ブラウザーの非互換性のために多くの問題が発生しますが、これは で既に解決されていjQueryます。を使用したいがjQuery、html コードにアクセスできず、読み込みたい場合は、次のように、JavaScript を使用して、URL からサイトjQueryに含めることができます。jQueryCDN

<script>  
   (function() {
        var jQ = document.createElement('script'); jQ.type = 'text/javascript'; 
        jQ.async = true;
        jQ.src = '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jQ, s);
   })();
</script>

Googleがanalyticsコードで行うように;）

Answer 3

ここにあなたが望むことを正確に行う単純な関数があります-

document.onkeydown=function(e){
    var char= String.fromCharCode(e.keyCode);
    if(char=='f'){
        alert(char);
    }else if(char=='r'){
        alert(char);
    }
}

Answer 4

これを試して

  document.onkeypress = keyPressFunction;

    function keyPressFunction(e) {
      var s = String.fromCharCode(e.which);
        if ( s === "f"){
         alert ("its f");
        }
        else if ( s === "r"){
         alert ("its r");
        }
    }