Javascript: navigating through a list of DIV with the keyboard
i would like to have a DIV list on which the user can navigate by pressing up/down cursor keys and getting event when he changes the current DIV, as it happens in Go开发者_开发问答ogle Instant results. Do you know if there is a jQuery/JS component to achieve it or any suggestions on the components to use.
Thanks !
Edit
I changed it to use mouseover for highlighting the divs and setting the content of the input on click and the arrow keys. I think this is more similar to Google's which is what you wanted.
End Edit
I just wrote this for you. I hope you're able to use it: http://jsfiddle.net/Paulpro/evBkC/8/
It should be easy to modify the css to style it the way you want from there. It highlights a div onclick and detects the up and down arrow keys if the input field has focus. It keeps track of the selectedDiv's index in a variable called selectedDiv so you can use it if you want. It should be fully cross-browser as far back as IE 5.5 at least and all the other major browsers.
HTML:
<div id="nav">
<input type="text" />
<div>Line 1</div>
<div>Line 2</div>
<div>Line 3</div>
<div>Line 4</div>
<div>Line 5</div>
<div>Line 6</div>
</div>
CSS:
#nav, #nav input{
width: 300px;
}
#nav div{
width: 150px;
margin-left: 75px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
cursor: pointer;
}
Javascript:
var divs = document.getElementById('nav').getElementsByTagName('div'),
selectedDiv = 0,
i;
for(i = 0; i < divs.length; i++){
divs[i].onmouseover = (function(i){
return function(){
divs[selectedDiv].style.backgroundColor = '';
selectedDiv = i;
divs[selectedDiv].style.backgroundColor = '#68F';
}
})(i);
divs[i].onclick = function(){
document.getElementById('nav').
getElementsByTagName('input')[0].focus();
document.getElementById('nav').
getElementsByTagName('input')[0].value =
(this.innerText || this.textContent);
};
}
divs[selectedDiv].style.backgroundColor = '#68F';
document.getElementById('nav').
getElementsByTagName('input')[0].onkeydown = function(e){
var x = 0;
if(e.keyCode == 38)
x = -1;
else if(e.keyCode == 40)
x = 1;
else
return;
divs[selectedDiv].style.backgroundColor = '';
selectedDiv = ((selectedDiv+x)%divs.length);
selectedDiv = selectedDiv < 0 ?
divs.length+selectedDiv : selectedDiv;
document.getElementById('nav').
getElementsByTagName('input')[0].value =
(divs[selectedDiv].innerText || divs[selectedDiv].textContent);
divs[selectedDiv].style.backgroundColor = '#68F';
};
document.getElementById('nav').
getElementsByTagName('input')[0].focus();
Someone wrote this:
<script type="text/javascript">
function fnSelect(objId) {
fnDeSelect();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect() {
if (document.selection) document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
<body>
<div id="test1">
<p>jhsdgfhlsdlfkjsdklgjs</p>
<p>jhsdgfhlsdlfkjsdklgjs</p>
<p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<div id="test2">
<p>jhsdgfhlsdlfkjsdklgjs</p>
<p>jhsdgfhlsdlfkjsdklgjs</p>
<p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<a href="javascript:fnSelect('test1');">Select 1</a>
<a href="javascript:fnSelect('test2');">Select 2</a>
<a href="javascript:fnDeSelect();">DeSelect</a>
</body>
Seems to work. I'll take a look at it later to see how.
加载中,请稍侯......
精彩评论