Question

一旦获得焦点，我需要在Tabbable DIV上拦截 Enter或空格键（13或32）。

我看到以下内容：

Chrome浏览器同时支持。
Firefox 不支持 Space 。
IE11 不支持 Enter 。

可以随每个浏览器依次打开以下代码段，以查看它们之间的区别：

$('#buttondiv').keypress(function (e) {
 
    // First log which key was pressed
    console.log(e.keyCode);

		if (e.keyCode == 13 || e.keyCode == 32) {
			alert('Intercepted Enter or Space');
		}
	});

#buttondiv {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<button id="buttonfocus" onclick="$('#buttondiv').focus()">
  Click here to focus DIV first
</button>

<div id="buttondiv" tabindex="0">
  Press Enter or Space on DIV after focusing
</div>

此外，如果感兴趣的话，请访问JSFiddle（但JSFiddle不会在IE中打开）： http://jsfiddle.net/v406agb1/

Answer 1

您应该使用keydown而不是keypress。这就是official documentation says：

注意：由于按键事件不受任何官方的报道   规范，使用时遇到的实际行为可能   跨浏览器，浏览器版本和平台的不同。

此方法是第一个.on（“ keypress”，handler）的快捷方式   两种变体，第三种是.trigger（“ keypress”）。

当浏览器注册时，keypress事件发送到一个元素   键盘输入。 这类似于keydown事件，除了   修改键和非打印键，例如Shift，Esc和Delete触发器   按键事件，但没有按键事件。之间的其他差异   根据平台和浏览器，可能会发生两个事件。

$('#buttondiv').keydown(function (e) {
 
    // First log which key was pressed
    console.log(e.keyCode);

		if (e.keyCode == 13 || e.keyCode == 32) {
			alert('Intercepted Enter or Space');
		}
	});

#buttondiv {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<button id="buttonfocus" onclick="$('#buttondiv').focus()">
  Click here to focus DIV first
</button>

<div id="buttondiv" tabindex="0">
  Press Enter or Space on DIV after focusing
</div>

Tabbable DIV上的空格或Enter键：某些浏览器无法拦截Keypress

1 个答案: