Javascript 绑定“单击”和“输入”键以获得辅助功能

给定表单（请注意

tabindex

属性）

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

---

这类操作是否有“主事件”来处理输入、单击、空格等，无论用户可能具有何种可访问性功能，而无需将

转换为

？

要将两者绑定，可以在

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');
        }
    });

参考资料：

---

要绑定两者，可以在

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');
        }
    });

参考资料：

---

取消按钮的作用是什么？如果它的目的是重置表单中的值，那么实际上应该使用重置的HTML输入类型，以使其适用于非JS用户：

如果您想给JS用户更丰富的体验，但非JS用户仍然可以获得预期的行为，那么您可以绑定到form reset事件并使用prevent default。一般来说，一个没有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
});

$（“#theForm”）.bind（“reset”，函数（e）{
e、 预防默认值（）；
//花式复位处理器
});

---

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

取消按钮的作用是什么？如果它的目的是重置表单中的值，那么实际上应该使用重置的HTML输入类型，以使其适用于非JS用户：

如果您想给JS用户更丰富的体验，但非JS用户仍然可以获得预期的行为，那么您可以绑定到form reset事件并使用prevent default。一般来说，一个没有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
});

$（“#theForm”）.bind（“reset”，函数（e）{
e、 预防默认值（）；
//花式复位处理器
});

---

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

+1。格里戈尔：使用链接而不是按钮，你必须使用

或像戴夫提到的那样使用

重置

。如果您从语义代码开始，因为Ryan B的评论而接受这个答案作为解决方案，那么可访问性问题更容易解决。

role=“button”

就是我想要的。ThanksHi Grigore，请注意，您所使用的在规范中描述为“角色属性使用不当，因为它试图将已经存在的元素的语义应用到其他元素上……虽然角色属性可用于向元素添加语义，但作者应使用具有固有语义的元素，例如

，而不是将语义分层到语义无关的元素上，例如

。“。如果对此感兴趣，您可以在此处阅读更多内容：+1至Dave的评论。很抱歉，我没有解释得那么透彻@格里戈尔-多宝迪塞尔，请使用

@GRIGORE-TURBODISEL:是的，他是指

+1。格里戈尔：使用链接而不是按钮，你必须使用

或像戴夫提到的那样使用

重置

。如果您从语义代码开始，因为Ryan B的评论而接受这个答案作为解决方案，那么可访问性问题更容易解决。

role=“button”

就是我想要的。ThanksHi Grigore，请注意，您所使用的在规范中描述为“角色属性使用不当，因为它试图将已经存在的元素的语义应用到其他元素上……虽然角色属性可用于向元素添加语义，但作者应使用具有固有语义的元素，例如

，而不是将语义分层到语义无关的元素上，例如

。如果您对此感兴趣，可以在这里阅读更多内容：+1到Dave的评论。很抱歉我没有详细解释。@GRIGORE-TURBODISEL，请使用

@GRIGORE-TURBODISEL:是的，他的意思是

。