使用空格键切换禁用jQuery UI Accordion

Question

我在jQuery UI中看到,您可以使用空格键来切换活动标题.如何禁用此功能？我不希望用户使用键盘与手风琴进行交互.

Answer 1

如果你根本不需要"_keydown"功能,我想你可以删除它.

delete($.ui.accordion.prototype._keydown);

如果你想改变或覆盖"_keydown"功能的功能,并且不想将其破解成原始文件,你可以这样做:

$.ui.accordion.prototype._keydown = function( event ) {
    // your new code for the "_keydown" function
};

希望有所帮助

Answer 2

我找到了一个可行的解决方案，但我不确定后果。

在 jquery.ui.accordion.js 中：

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

注意从太空“坠落”进入。我添加了一个中断：

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
            break;
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

按“回车”键后您仍然会得到关闭行为，因此如有必要，也可以随时中断。我认为问题在于

this._clickHandler( { target: event.target }, event.target );

但我在第一次阅读时没有看到它。这个编辑对我有用。

希望有帮助