I'm testing keyboard navigation, but as I move on a dropdownlist it index change itself, I mean if it value is A as we focus on it through keyboard it value will become B.
I've used this to stop this but still no luck.
e.preventDefault();
e.cancelBubble = true;
return false;
Here is the entire script of navigation.
<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('act开发者_如何学Pythonive_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>
Link to the file, please suggest a solution, how to stop this index changing. http://69.175.126.242/~develope/younussal/test/test.htm
Try e.stopPropagation();
It is in the JQuery documentation: http://api.jquery.com/event.stopPropagation/
I had encountered this same problem :
The hack I used was to blur it
node.addEventListener('focus',function(){this.blur();},false);
Use the 'TAB' key to move between controls instead of the arrows key (standard keyboard navigation).
Do not intercept arrow keys, you need them to change the values in the controls (selected items in the select boxes).
The browser and the OS should already do most of the work for you.
精彩评论