如何在HTML / Javascript中获取键值

时间:2013-08-07 22:01:40

标签: javascript html

好的,所以我理解如何在使用输入字段时获取键值...但我正在考虑在您的浏览器没有聚焦在任何文本框或文本区域时按下的键值。

我正在尝试制作一个屏幕键盘,其按键为0,1,2,... 9 ...但是我希望用户能够使用键盘上的按键按下按钮。

我在某些网站上看到过这种情况,如果按主页上的S键,它会转到登录屏幕。 Facebook也喜欢L键,喜欢照片。

所以问题是:当光标未聚焦时,如何在javascript中获取键值。

6 个答案:

答案 0 :(得分:4)

如果您使用的是JQuery,只需将事件处理程序添加到文档中......

$(document).keypress(function(event) {
      alert('Handler for .keypress() called. - ' + event.which);
});

(来自http://forum.jquery.com/topic/how-to-catch-keypress-on-body

编辑zzzzBov的评论......

来自JQuery KeyPress文档:

  

要确定输入了哪个字符,请检查事件对象   传递给处理函数。虽然浏览器使用不同   存储此信息的属性,jQuery规范化.which   属性,因此您可以可靠地使用它来检索字符代码。

答案 1 :(得分:1)

你需要使用window.onkeydown,然后检查你感兴趣的密钥。

https://developer.mozilla.org/en-US/docs/Web/API/window.onkeydown

答案 2 :(得分:0)

你应该听一下按键事件。

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    alert("Character typed: " + String.fromCharCode(charCode));
};

更多信息请点击此处Link

答案 3 :(得分:0)

您需要向窗口添加事件侦听器。然后在事件处理程序中,您从传入的事件中获取keyCode属性。 KeyCodes是半随意的,因为它们不会直接映射到你的想法,所以你必须使用一个表(谷歌的第一个结果:http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes)来识别你关心的密码。

window.addEventListener('keypress',function (evt) {
   switch (evt.keyCode) {
       case 48:
           zeroKeyPressed(); break;
       case 49:
           oneKeyPressed(); break;
       ...
   }
}, false);

答案 4 :(得分:0)

您可以使用按键事件。

以下是您的使用示例:

window.addEventListener('keypress', function (event) {

    var key_code, key;

    event = event || window.event; // IE

    key_code = event.charCode || event.keyCode || event.which || 0;
    key = String.fromCharCode(key_code);

    // prevent keys 0-9 from doing what they normally would do
    if (key_code >= 48 && <= 57) {
        event.preventDefault();
        alert('The user pressed ' + key);
    }

}, false);

答案 5 :(得分:0)

使用普通js,您可以在开头的layout.htmlcs中使用它:

  @{

        <script>
            sessionStorage.setItem("ProductionHostURL", '@System.Configuration.ConfigurationManager.AppSettings["ProductionHostURL"]');
        </script>

}
<!DOCTYPE html>

然后在layout.htmlcs的主js文件中,可以使用如下所示的方法:

var urlBaseProduction;
var urlBaseDevelopment;

    $(document).ready(function () {
      configureHostEnvironment()
     ....
    }

在该方法中,配置要在生产和开发中使用的变量,如下所示:

function configureHostEnvironment(){

    HOST = sessionStorage.getItem("ProductionHostURL")
    if (HOST.length <= 0) {
        alert("Host not configured correctly")
    } else {
        urlBaseProduction= host + '/api/';
        urlBaseDevelopment= host + port + '/api/';
    }
}

如果您对此方法有建议或改进,请发表评论。