1

我正在使用 Firefox 65.0 进行 Web 开发。我的项目代码包含密码输入。onkeydown一年多以前，我使用 JS 代码开发了这个，该代码检测使用和onkeyup功能的按键。它适用于所有浏览器，除了新的 Firefox 版本 65.0

我的代码与此类似：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=password id="button" autocomplete_="off"></input>

<script>
  $("#button").keydown(function(event) {
    console.log("key: " + event.key);
  });

  document.getElementById("button").onkeydown = function(event) {
    console.log("key: " + event.key);
  };
</script>

对于这两种情况，event.key值都不是按下的按钮，而只是"Process"一个字符串。有人知道我为什么会得到这个结果吗？我该如何解决它并检测真正的按键值？

我的操作系统版本：是 ubuntu 18.04

编辑：添加调试屏幕截图

另外我在事件下找不到任何可以帮助我的属性

您可以在下面找到“a”键情况下 onkeydown 处理程序中的调试屏幕截图。

在此处输入图像描述

4

1 回答 1

1

键码有很多不同的事件属性，它们都返回一些不同的东西。尝试event.which，如果这不起作用，这里是其他事件属性的列表

编辑以提供更多信息

我做了一些测试，原因似乎是您尝试在 type="password" 的输入上记录按键。删除 type="password" 和两者后，我在 Firefox 中测试了您的代码片段event.which并event.key正常工作。我想它被 Firefox 故意混淆以避免脚本记录密码击键。如果您需要密码的值，请event.target.value在事件侦听器中使用。另外我建议使用'keyup'事件而不是keydown，否则当你按住一个键时你会遇到监听器重复触发的问题。

带密码属性

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="button" autocomplete_="off"></input>

<script>  
  // Either remove the password type on your button, or access the event.target.value property and slice out the last keypress
  document.querySelector("#button").addEventListener('keyup', (event) => {
  	console.log(`Which: ${event.which}, Key: ${event.key}`);
    console.log(`Value: ${event.target.value}`);
  });
</script>

没有密码属性

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" autocomplete_="off"></input>

<script>  
  // Either remove the password type on your button, or access the event.target.value property and slice out the last keypress
  document.querySelector("#button").addEventListener('keyup', (event) => {
  	console.log(`Which: ${event.which}, Key: ${event.key}`);
    //console.log(`Value: ${event.target.value}`);
  });
</script>

于 2019-02-25T11:50:17.507 回答