如何在HTML/Javascript中获取键值

How do I get key values in HTML/Javascript

本文关键字：获取 键值 Javascript HTML      更新时间：2023-09-26

好的，所以我了解如何在使用输入字段时获得键值。。。但我正在考虑当你的浏览器没有集中在任何文本框或文本区域时按下的键值。

我正在尝试制作一个屏幕键盘，它有0、1、2、…的按钮。。9…然而，我希望用户能够用键盘上的键按下按钮。

我在一些网站上看到过这样做，如果你按下主页上的S键，它会带你进入登录屏幕。脸书也做L键，喜欢一张照片。

所以问题是：当光标没有聚焦时，我如何获得javascript中的键值。

如果使用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将属性，以便可以可靠地使用它来检索字符代码。

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

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

您应该监听按键事件。

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

有关更多信息，请查看此处链接

您需要向窗口添加一个事件侦听器。然后在事件处理程序中，从传入的事件中获取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);

您将使用按键事件。

下面是一个使用示例：

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

使用纯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/';
    }
}

如果你对这个方法有什么建议或改进，请评论。

相关文章：