我正在测试键盘导航，但是当我在下拉列表上移动时，它的索引会改变，我的意思是如果它的值是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>链接到该文件，请建议一个解决方案，如何停止此索引更改. http://69.175.126.242/~develope/younussal/test/test.htm
3条答案
按热度按时间chhqkbe11#
尝试
e.stopPropagation();它位于JQuery文档中：http://api.jquery.com/event.stopPropagation/
mspsb9vt2#
我也遇到过同样的问题：
我用的黑客技术是模糊它
sqyvllje3#
使用“Tab”键在控件之间移动，而不是使用箭头键（标准键盘导航）。
不要拦截箭头键，您需要它们来更改控件（选择框中的选定项）中的值。
浏览器和操作系统应该已经为你做了大部分的工作。