Question

我需要在图像元素上捕获onkeyup事件。这是该元素的标记：

<input class="globalbuttons" type="image" alt="save" title="save"
  onclick="resetScrollPosition(); tabindex="0" 
  src="/kc-dev/kr/static/images/buttonsmall_save.gif" 
  name="methodToCall.save">

原因是强制所有用户使用鼠标并单击按钮，而不是允许用户切换到图像并按 Space 或 Enter 来模拟点击鼠标。

我得到了以下简单的测试：

<input class="globalbuttons" type="image" alt="save" title="save"
 onclick="resetScrollPosition(); tabindex="0"
 onkeyup="alert(event.keyCode);"
 . . .

当图像保持清晰对焦时，警报会正确显示我按下的每个按键的按键代码。接下来，我尝试用函数替换警报并将函数传递给事件，但这不起作用。

另外，我想知道这是否是最佳方法：

我是否应该忽略可以“模拟点击”的按键（例如 Space 或 Enter ）。

或者
最好不要区分被按下的键，而是忽略此元素的所有键？

感谢。

Answer 1

我看不到保留仅一些密钥的情况。所以，我推荐的是两件事。

将tabindex="-1"添加到您的输入中，默认情况下将其从“标签设置为”中删除。

<input class="globalbuttons" type="image" alt="save" title="save" onclick="resetScrollPosition();" tabindex="-1" src="http://placehold.it/350x150" />

在这些元素的键盘上返回false。

function avoidKey() {
    /* keyCode logic if you decide to go that route */
    return false;
}

var gb = document.getElementsByClassName('globalbuttons');
for (var i=0; i < gb.length; i++) {
    // Would be better to have a function that abstracts binding multiple events
    gb[i].addEventListener('keyup', avoidKey, false);
    gb[i].addEventListener('keypress', avoidKey, false);
    gb[i].addEventListener('keydown', avoidKey, false);
}

浏览器支持getElementsByClassName()

可能更容易使用jQuery路由并使用$('.globalbuttons').on('keyup keydown keypress', function() { });

捕获图像元素＆＃39; onkeyup＆＃39;事件

1 个答案: