2

Given a form (please note the tabindex property)

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

Binding an action to the cancel button

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

Now, when a user wants to cancel the changes, he will simply click the "cancel" button. But if he navigates with the TAB key and then hit enter the alert doesn't come up.

Is there a "master event" for this kind of actions, to handle both enter, clicks, spaces, etc., whatever accessibility features a user might have, without converting the <a> into a <button>?

4

2 に答える 2

3

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 の概念実証。

参考文献:

于 2012-07-14T00:36:24.007 に答える
1

キャンセルボタンは何をしますか？目的がフォームの値をリセットすることである場合は、非 JS ユーザーがこれを機能させるために、代わりにリセットの HTML 入力タイプを実際に使用する必要があります。

その後、フォーム リセット イベントにバインドし、JS ユーザーによりリッチなエクスペリエンスを提供したい場合はデフォルトの防止を使用できますが、非 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
});

デフォルトでは、フォームイベントにバインドしているため、これにはマウス、キーボード、またはタッチ操作が含まれる必要があります。

于 2012-07-14T17:10:10.567 に答える