绑定 click 和 enter 键以实现可访问性

Question

给定一个表单（请注意tabindex 属性）

<form id="settings-form">
    <input type="text" />
    <input type="submit" />
    <a href="#" class="cancel-save" tabindex="0">cancel</a>
</form>

将动作绑定到取消按钮

$('#settings-form').find('.cancel-save').click(function(){ alert('CANCEL SAVE'); });

现在，当用户想要取消更改时，他只需单击“取消”按钮即可。但是，如果他使用 TAB 键导航，然后按 Enter，则不会出现警报。

这种操作是否有一个“主事件”来处理输入、点击、空格等，无论用户可能拥有的任何可访问性功能，而不会将 <a> 转换为 <button>？

Answer 1

要同时绑定两者，您可以在on() 方法的第一个参数中定义多个事件（在空格分隔的列表中）：

$('#settings-form').find('.cancel-save').on('keypress click',
    function(e){
        var eType = e.type;
        if (eType == 'click' || (eType == 'keypress' && e.which == 13)) {
            alert('CANCEL SAVE');
        }
    });

JS Fiddle proof-of-concept.

参考资料：

• on()。

Answer 2

取消按钮有什么作用？如果它的目的是重置表单中的值，你应该真正使用 HTML 输入类型的 reset 代替，以便非 JS 用户使用：

如果您想为 JS 用户提供更丰富的体验，那么您可以绑定到表单重置事件并使用 prevent default，但非 JS 用户仍然可以获得预期的行为。一般来说，一个没有 JavaScript 什么都不做的锚可能会更好地实现（或者至少通过 JavaScript 注入），特别是如果您关心可访问性。

<form id="theForm">
    <input type="text" value=""/>
    <input type="submit" value=""/>
    <input type="reset" value="Cancel"/>
</form>

$("#theForm").bind("reset", function(e) {
    e.preventDefault();
    //Fancy reset handler
});

默认情况下，这应该包括鼠标、键盘或触摸交互，因为您绑定到表单事件。