jjzjj

javascript - 我怎么知道 keydown 会导致 keypress 事件，在那种情况下忽略它？

coder 2024-07-26 原文

我对 javascript 中的关键事件不是很满意。我需要捕获用于书写的字母(我正在 <canvas> 上书写文本)和用于其他命令的功能键(转义)。

在 Firefox 中它可以工作，因为 Firefox 会触发 keypress 任何键的事件。很舒服但是specification directly permits it :

If supported by a user agent, this event MUST be dispatched when a key is pressed down, if and only if that key normally produces a character value.

我不同意该规范，因为我认为没有理由这样做。但事已至此，我也无能为力。

问题是谷歌浏览器遵循该规范并且不会触发 keypress用于功能键。但是，它确实不会触发 keydown对于所有键。

我的程序只有一个键事件处理程序。它期望包含 keyCode 的事件(物理键的 ID 和可选 charCode，等效字符值(对于有意义的键)。

keydown事件在两个浏览器中都不包含任何字符值!它只包含 keyCode .因此，如果您定义 Ctrl+Z 组合并监听 keydown事件，对于具有 QWERTZ 布局的用户，您的程序将被破坏 - 因为键的物理位置 (keyCode) 仍然相同。

如果您同时收听 keydown和 keypress , Angular 色事件将触发两次(因为 Angular 色首先触发 keydown 然后 keypress 具有适当的 charCode 属性)

我需要什么？

基于以上，我需要忽略keydown将导致 keypress 的键事件.这样做，我将能够在 keydown 中捕获 Esc和 keypress 中的字符.

我怎么可能做到？

相关代码:

  //Keypress for character codes
  div.addEventListener("keypress", function(event) {
    console.log(event);      
    if(_this.editor.event(event)) {
      console.log("Event canceled.");
      event.preventDefault();
      event.cancelBubble = true;
      return false;  
    }
    return true;  
  });
  //Keydown for Esc and the likes
  div.addEventListener("keydown", function(event) {
    //Character events are handled by keypress
    if(event.charCode!=0)  //Does NOT work - in keydown, charCode is ALLWAYS 0
      return true;    

    console.log(event);      
    if(_this.editor.event(event)) {
      console.log("Event canceled.");
      event.preventDefault();
      event.cancelBubble = true;
      return false;  
    }
    return true;
  });

Interactive example

我想我花了很多时间制作 JSFiddles，但它并没有真正增加得到答案的几率，所以我上传了实际的项目。

点击Firefox中的白色方 block ，按T，输入文字，按Esc，按Esc。 Esc 秒后，光标应恢复正常。尝试绘制并按 Ctrl+Z。

在谷歌浏览器中重复该过程。 Escape 不会工作，因为它不会触发 keypress .出于某种原因，Ctrl+Z 触发事件 keyCode 26.

来自聊天和评论:

@someDoge has created a fiddle我已经扩展了它，现在很好地说明了情况。如您所见，您可以知道某个键不是字符并在按键中忽略它。但是你不能知道 tab 不是字符并在 keydown 中取消它(除非您有固定的键码值数组，如@someDoge 在评论中建议的那样)。

最佳答案

您需要监听 keyup 事件而不是 keydown，这样您就不会生成两个单独的事件。

然后您可以使用相同的处理函数处理这两种事件类型，该处理函数将获取或不获取 charCode，具体取决于特定键是否生成了“按键”事件。只要您防止冒泡，您的处理程序就只会被调用一次。

关于 Chrome CTRL+Z 问题:如果按下控制键，我看不出如何获取 charCode，因为它似乎只生成一个 keyup 事件。

关于javascript - 我怎么知道 keydown 会导致 keypress 事件，在那种情况下忽略它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27254507/

javascriptkeypresscodekbdeventeventskeyboard-events

有关javascript - 我怎么知道 keydown 会导致 keypress 事件，在那种情况下忽略它？的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  3. ruby - Ruby 中的隐式返回值是怎么回事？ - 2

    所以我开始关注ruby​​，很多东西看起来不错，但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说，它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!)，其他人可能最终依赖于一个返回对方法的目的并不重要，并且有很大的改变机会。隐式返回有什么意义？有没有办法让事情变得更简单？总是有返回以防止隐含返回被认为是好的做法吗？我是不是太担心这个了？附言当人们想要从方法中返回特定的东西时，他们是否经常使用隐式返回，这不是让你组中的其他人更容易破坏彼此的代码吗？当然，记录一切并给出

  4. ruby - 怎么来的(a_method || :other) returns :other only when assigning to a var called a_method? - 2

    给定以下方法:defsome_method:valueend以下语句按我的预期工作:some_method||:other#=>:valuex=some_method||:other#=>:value但是下面语句的行为让我感到困惑:some_method=some_method||:other#=>:other它按预期创建了一个名为some_method的局部变量，随后对some_method的调用返回该局部变量的值。但为什么它分配:other而不是:value呢？我知道这可能不是一件明智的事情，并且可以看出它可能有多么模棱两可，但我认为应该在考虑作业之前评估作业的右侧...我已经在R

  5. ruby-on-rails - 我该怎么办 :remote location validation with CarrierWave? - 2

    我在我的Rails3示例应用程序上使用CarrierWave。我想验证远程位置上传，因此当用户提交无效URL(空白或非图像)时，我不会收到标准错误异常:CarrierWave::DownloadErrorinImageController#createtryingtodownloadafilewhichisnotservedoverHTTP这是我的模型:classPaintingtrue,:length=>{:minimum=>5,:maximum=>100}validates:image,:presence=>trueend这是我的Controller:classPaintingsC

  6. ruby - 在不使用 RVM 的情况下在 Mac 上卸载和升级 Ruby - 2

    我最近决定从我的系统中卸载RVM。在thispage提出的一些论点说服我:实际上，我的决定是，我根本不想担心Ruby的多个版本。我只想使用1.9.2-p290版本而不用担心其他任何事情。但是，当我在我的Mac上运行ruby--version时，它告诉我我的版本是1.8.7。我四处寻找如何简单地从我的Mac上卸载这个Ruby，但奇怪的是我没有找到任何东西。似乎唯一想卸载Ruby的人运行linux，而使用Mac的每个人都推荐RVM。如何从我的Mac上卸载Ruby1.8.7？我想升级到1.9.2-p290版本，并且我希望我的系统上只有一个版本。 最佳答案

  7. 电脑0x0000001A蓝屏错误怎么U盘重装系统教学 - 2

    　　电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug，只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢？来看看以下的详细操作方法教学吧。　　准备工作：　　1、U盘一个（尽量使用8G以上的U盘）。　　2、一台正常联网可使用的电脑。　　3、ghost或ISO系统镜像文件（Win10系统下载_Win10专业版_windows10正式版下载-系统之家）。　　4、在本页面下载U盘启动盘制作工具：系统之家U盘启动工具。　　U盘启动盘制作步骤：　　注意：制作期间，U盘会被格式化，因此U盘中的重要文件请注

  8. ruby - 在什么情况下会使用 Sinatra 或 Merb？ - 2

    我正在学习Rails，对Sinatra和Merb知之甚少。我想知道您会在哪些情况下使用Merb/Sinatra。感谢您的反馈! 最佳答案 Sinatra是一个比Rails更小、更轻的框架。如果你想让一些东西快速运行，只需发送几个URL并返回一些简单的内容，就可以使用它。看看Sinatrahomepage;这就是启动和运行“Hello,World”所需的全部内容，而在Rails中，您需要生成整个项目结构、设置Controller和View、设置路由等等(我还没有有一段时间写了一个Rails应用程序，所以我不知道“Hello,World

  9. ruby - 是否可以在不实际发送或读取数据的情况下查明 ruby​​ 套接字是否处于 ESTABLISHED 或 CLOSE_WAIT 状态？ - 2

    s=Socket.new(Socket::AF_INET,Socket::SOCK_STREAM,0)s.connect(Socket.pack_sockaddr_in('port','hostname'))ssl=OpenSSL::SSL::SSLSocket.new(s,sslcert)ssl.connect从这里开始，如果ssl连接和底层套接字仍然是ESTABLISHED，或者它是否在默认值7200之后进入CLOSE_WAIT，我想检查一个线程几秒钟甚至更糟的是在实际上不需要.write()或.read()的情况下关闭。是用select()、IO.select()还是其他方法完成

  10. ruby-on-rails - 在这种情况下我如何模拟一个对象？没有明显的方法可以用模拟替换对象 - 2

    假设我在Store的模型中有这个非常简单的方法:defgeocode_addressloc=Store.geocode(address)self.lat=loc.latself.lng=loc.lngend如果我想编写一些不受地理编码服务影响的测试脚本，这些脚本可能已关闭、有限制或取决于我的互联网连接，我该如何模拟地理编码服务？如果我可以将地理编码对象传递到该方法中，那将很容易，但我不知道在这种情况下该怎么做。谢谢!特里斯坦 最佳答案 使用内置模拟和stub的rspecs，你可以做这样的事情:setupdo@subject=MyCl

随机推荐