Question

我正在测试键盘导航，但是当我在下拉列表中移动它时索引会自行更改，我的意思是如果它的值是A，因为我们通过键盘将其重点放在它上面，它的值将变为B.

我用这个来阻止这个但仍然没有运气。

 e.preventDefault();
e.cancelBubble = true;
return false;

以下是整个导航脚本。

<script type="text/javascript">
var _parent;
var _selectedIndex = 0;
$(document).ready(function() {

    $("input.flat,select.flat").click(function(){

        $("input.flat,select.flat").each(function(){
            $(this).removeClass('active_ele');
        });

        $(this).addClass('active_ele');

    });


    $("select.flat").bind('focus',function (e) {

        //e.preventDefault();
        //e.focus();
        //return false;
        //e.cancelBubble = true;
        //return false;
    });

    $("input.flat,select.flat").bind('keydown',function (e) {

        switch(e.keyCode)
        {
            case 37:
                /////Right
                _parent = $(this).parent().prev();

                if(_parent.hasClass('combo'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("select.flat");
                    nNode.addClass('active_ele');
                    _selectedIndex = nNode[0].selectedIndex;
                    nNode[0].focus();
                    nNode[0].selectedIndex = _selectedIndex;

                }
                else if(_parent.hasClass('inputBox'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("input.flat");
                    nNode.addClass('active_ele');
                    nNode.focus();

                }   


            break;

            case 39:
            //////////Left

                _parent = $(this).parent().next();

                if(_parent.hasClass('combo'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("select.flat");
                    nNode.addClass('active_ele');
                    _selectedIndex = nNode[0].selectedIndex;
                    nNode[0].focus();
                    nNode[0].selectedIndex = _selectedIndex;
                }
                else if(_parent.hasClass('inputBox'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("input.flat");
                    nNode.addClass('active_ele');
                    nNode.focus();
                }   


                break;

            case 40:
                /////Down
                _nNode = $(this).parent();
                _index = _nNode.attr('data');

                _index =  parseInt(_index) + 1
                ///td
                _nNode = _nNode.parent()
                    .next()
                    .children(0)[_index];

                _nNode = $(_nNode); 

                if(_nNode[0])
                {
                    if(_nNode.hasClass('combo'))
                    {   

                        _nNode = _nNode.children("select.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _selectedIndex = _nNode[0].selectedIndex;
                        _nNode[0].focus();
                        _nNode[0].selectedIndex = _selectedIndex;

                    }
                    else if(_nNode.hasClass('inputBox'))
                    {
                        _nNode = _nNode.children("input.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _nNode.focus();
                    }
                }


                break;

            case 38:
            /////Up
                    _nNode = $(this).parent();
                _index = _nNode.attr('data');
                    _index =  parseInt(_index) + 1
                ///td
                _nNode = _nNode.parent()
                    .prev()
                    .children(0)[_index];
                _nNode = $(_nNode); 
                if(_nNode[0])
                {
                    if(_nNode.hasClass('combo'))
                    {   

                        _nNode = _nNode.children("select.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _selectedIndex = _nNode[0].selectedIndex;
                        _nNode[0].focus();
                        _nNode[0].selectedIndex = _selectedIndex;
                    }
                    else if(_nNode.hasClass('inputBox'))
                    {
                        _nNode = _nNode.children("input.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _nNode.focus();
                    }
                }
                break;

            case 46:
                $(this).val("");
        }

        e.preventDefault();
        e.cancelBubble = true;
        return false;


    });
});

</script>

链接到该文件，plz提示解决方案，如何阻止此索引更改。 http://69.175.126.242/~develope/younussal/test/test.htm

由于

Answer 1

尝试e.stopPropagation();

它位于JQuery文档中：http://api.jquery.com/event.stopPropagation/

Answer 2

我遇到过同样的问题：

我使用的黑客是模糊它

node.addEventListener('focus',function(){this.blur();},false);

Answer 3

使用'TAB'键在控件之间移动而不是箭头键（标准键盘导航）。

不要截取箭头键，您需要它们来更改控件中的值（选择框中的选定项）。

浏览器和操作系统应该已经完成了大部分工作。

停止焦点JQuery上的事件传播

3 个答案: