本机javascript中的按键功能[关闭]答案

【问题标题】：Keypress function in native javascript [closed]本机javascript中的按键功能[关闭]
【发布时间】：2013-03-16 06:42:49
【问题描述】：

下面是我的代码：

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

我想在 JavaScript 中做到这一点............!!

我该怎么做？

【问题讨论】：

为什么标题是“原生javascript中的文档准备功能”？
不知道他为什么把它命名为“准备好文件”，但这篇文章会回答这个问题：stackoverflow.com/questions/1283445/…

标签： javascript jquery

【解决方案1】：

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

【讨论】：

两个关键事件属性都是deprecated，使用keydown（按下）和keyup（释放）。

【解决方案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代码，并且你想加载jQuery你可以将jQuery从CDN url包含到你的站点，也可以使用javascript，像这样：

<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>

正如谷歌在 analitycs 代码中所做的那样；）

【讨论】：

无法设置未定义的属性“onkeypress”
您是否将代码粘贴到文档末尾？您的代码是否在 domready 事件之后运行？我对此进行了编辑，以展示如何在 domready 之后运行。

【解决方案3】：

试试这个

  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");
        }
    }

【讨论】：

Uncaught ReferenceError: e is not defined
@EnterJQ 我更新了我的代码检查一次

【解决方案4】：

这里有一个简单的功能，可以完全满足您的需求 -

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

【讨论】：