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输入类型的重置，以便这对非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
});

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

绑定两次并输入密钥以获取辅助功能

2 个答案: