blocks|key|1719424|text|当您按下这些键时，浏览器窗口是否保持焦点？在windows中，当按下windows%2BR或CTRL%2BESC以及类似的组合键时，你可以得到类似的结果，这会使浏览器失去焦点，从而导致错过事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1719425|entityMap^0|Y|9|18|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Is the browser window retaining the focus when you press those keys? In windows you can get similar result when pressing <code>windows+R</code> or <code>CTRL+ESC</code> and similar key combinations that make browser to loose focus and that results in missed events.</p>


blocks|key|1933049|text|您可以通过在最后一个keydown事件之后等待一段时间来创建一个人工keyup事件。唯一需要注意的是，人们在操作系统上会有不同的重复频率。https://jsfiddle.net/u7t43coz/10/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1933050|const+metaKeyCodes+=+["MetaLeft",+"MetaRight"];
const+shiftKeyCodes+=+["ShiftLeft",+"ShiftRight"];
const+ctrlKeyCodes+=+["ControlLeft",+"ControlRight"];
const+altKeyCodes+=+["AltLeft",+"AltRight"];
const+modifierKeyCodes+=+[
++...metaKeyCodes,
++...shiftKeyCodes,
++...ctrlKeyCodes,
++...altKeyCodes
];

//+record+which+keys+are+down
const+downKeys+=+new+Set()
const+artificialKeyUpTimes+=+{}

function+onKeydown(e)+{
++++downKeys.add(e.code);

++++//+do+other+keydown+stuff+here
++++console.log("meta",+e.metaKey,+e.code,+"down")

++++//+check+if+metaKey+is+down
++++if+(metaKeyCodes.some(k+=>+downKeys.has(k)))+{
++++++downKeys.forEach(dk+=>+{
++++++++//+we+want+to+exclude+modifier+keys+has+they+dont+repeat
++++++++if+(!modifierKeyCodes.includes(dk))+{
++++++++++//+fire+artificial+keyup+on+timeout
++++++++++if+(!artificialKeyUpTimes[dk])
++++++++++++setTimeout(
++++++++++++++()+=>+fireArtificialKeyUp(dk,+e),
++++++++++++++500
++++++++++++);
++++++++++artificialKeyUpTimes[dk]+=+Date.now();
++++++++}
++++++});
++++}
++}

+function+fireArtificialKeyUp(code,+e)+{
++++//+if+enough+time+has+passed+fire+keyup
++++if+(Date.now()+-+artificialKeyUpTimes[code]+>+100)+{
++++++delete+artificialKeyUpTimes[code];
++++++//if+key+is+still+down,+fire+keyup
++++++if+(downKeys.has(code))+{
++++++++const+eCode+=+isNaN(code)+?+{+code:+code+}+:+{+keyCode:+code+};
++++++++document.dispatchEvent(
++++++++++new+KeyboardEvent("keyup",+{+...e,+...eCode+})
++++++++);
++++++}
++++}+else+{
++++++setTimeout(()+=>+fireArtificialKeyUp(code,+e),+100);
++++}
++}

++function+onKeyup(e)+{
++++downKeys.delete(e.code);

++++//+do+keyup+stuff+here
++++console.log("meta",+e.metaKey,+e.code,+"up")
++}

++document.addEventListener("keydown",+onKeydown)
++document.addEventListener("keyup",+onKeyup)|code-block|syntax|javascript|1933051|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/u7t43coz/10/^0|1X|X|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can create an artificial keyup event by waiting for a certain period after the last keydown event. The only caveat is people will have different repeat rates on their os.
<a href="https://jsfiddle.net/u7t43coz/10/" rel="nofollow noreferrer">https://jsfiddle.net/u7t43coz/10/</a></p>

<pre class="lang-js prettyprint-override"><code>const metaKeyCodes = ["MetaLeft", "MetaRight"];
const shiftKeyCodes = ["ShiftLeft", "ShiftRight"];
const ctrlKeyCodes = ["ControlLeft", "ControlRight"];
const altKeyCodes = ["AltLeft", "AltRight"];
const modifierKeyCodes = [
  ...metaKeyCodes,
  ...shiftKeyCodes,
  ...ctrlKeyCodes,
  ...altKeyCodes
];

// record which keys are down
const downKeys = new Set()
const artificialKeyUpTimes = {}

function onKeydown(e) {
    downKeys.add(e.code);

    // do other keydown stuff here
    console.log("meta", e.metaKey, e.code, "down")

    // check if metaKey is down
    if (metaKeyCodes.some(k =&gt; downKeys.has(k))) {
      downKeys.forEach(dk =&gt; {
        // we want to exclude modifier keys has they dont repeat
        if (!modifierKeyCodes.includes(dk)) {
          // fire artificial keyup on timeout
          if (!artificialKeyUpTimes[dk])
            setTimeout(
              () =&gt; fireArtificialKeyUp(dk, e),
              500
            );
          artificialKeyUpTimes[dk] = Date.now();
        }
      });
    }
  }

 function fireArtificialKeyUp(code, e) {
    // if enough time has passed fire keyup
    if (Date.now() - artificialKeyUpTimes[code] &gt; 100) {
      delete artificialKeyUpTimes[code];
      //if key is still down, fire keyup
      if (downKeys.has(code)) {
        const eCode = isNaN(code) ? { code: code } : { keyCode: code };
        document.dispatchEvent(
          new KeyboardEvent("keyup", { ...e, ...eCode })
        );
      }
    } else {
      setTimeout(() =&gt; fireArtificialKeyUp(code, e), 100);
    }
  }

  function onKeyup(e) {
    downKeys.delete(e.code);

    // do keyup stuff here
    console.log("meta", e.metaKey, e.code, "up")
  }

  document.addEventListener("keydown", onKeydown)
  document.addEventListener("keyup", onKeyup)
</code></pre>


blocks|key|1719476|text|尽管event.metaKey返回false，但仍然填充了event.keyCode和event.key。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719477|​|1719478|document.addEventListener('keyup',+function(e)+{
++++console.log(e.metaKey+%7C%7C+e.key);
});|code-block|syntax|javascript|1719479|Click+here+then+press+the+Command,+Control,+or+Option+keys.|1719480|1719481|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Although event.metaKey returns false, event.keyCode and event.key are still populated.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('keyup', function(e) {
    console.log(e.metaKey || e.key);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Click here then press the Command, Control, or Option keys.</code></pre>
</div>
</div>
</p>


<p>On Mac browsers, javascript does not receive keyup events for most keys (other modifier keys seem to be an exception) when the metakey is down. Use this jsfiddle to demonstrate (focus the result area and try something like cmd + x, the x will not receive a keyup event):
<a href="http://jsfiddle.net/mUEaV/">http://jsfiddle.net/mUEaV/</a></p>

<p>I've reproduced this in stable releases for Chrome, FF, Safari and Opera. The same thing does not seem to happen with the control key in Windows 7.</p>

<p>Is the OS hijacking the keyup event? This seems especially strange since commands that use the metakey such as save, find, cut, copy, etcetera all activate on keydown not on keyup, and can be hijacked by the javascript just fine.</p>


Why does Javascript drop keyUp events when the metaKey is pressed on Mac browsers?

在Mac浏览器上，当metakey关闭时，javascript不会接收大多数键的keyup事件(其他修饰键似乎是个例外)。使用这个jsfiddle来演示(聚焦结果区域并尝试像cmd + x这样的东西，x将不会收到keyup事件)：我已经在Chrome，FF，Safari和Opera的稳定版本中重现了这一点。在Windo...

问为什么在Mac浏览器上按下metaKey时，Javascript会丢弃keyUp事件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么在Mac浏览器上按下metaKey时，Javascript会丢弃keyUp事件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么在Mac浏览器上按下metaKey时，Javascript会丢弃keyUp事件？
EN