Navigating using Cursor Keys
-
Hi all. I'm having a slight problem to which I can't seem to find a solution on Google (obv because I'm not searching right) so I thought you might point me towards a link with a solution. I have a textbox. Using Javascript, whenever the user enters a key, javascript iterates through a predefined array and returns a list of matching items in a Div. The result is :
- item 1
......* item n
Then the user can click on one of the items and the selected option is automatically inserted into the textbox. So far so good. But, how is it possible to let the user use the cursor keys on his/her keyboard to select an option? :/ I have no idea how can this be done but I'm sure it can be. Could someone direct me to a tutorial on this? Coz I'm sure it wouldn't make sense to give the code here (sure it will be too long). Thanks a lot for any help provided. PS: I'm using ASP VB but I can translate from PHP and .NET code if need be. I'm sure this is purely Javascript but still ;) In life truth does not matter. What really matters is what others believe to be the truth. (The Up and Comer - Book)
- item 1
-
Hi all. I'm having a slight problem to which I can't seem to find a solution on Google (obv because I'm not searching right) so I thought you might point me towards a link with a solution. I have a textbox. Using Javascript, whenever the user enters a key, javascript iterates through a predefined array and returns a list of matching items in a Div. The result is :
- item 1
......* item n
Then the user can click on one of the items and the selected option is automatically inserted into the textbox. So far so good. But, how is it possible to let the user use the cursor keys on his/her keyboard to select an option? :/ I have no idea how can this be done but I'm sure it can be. Could someone direct me to a tutorial on this? Coz I'm sure it wouldn't make sense to give the code here (sure it will be too long). Thanks a lot for any help provided. PS: I'm using ASP VB but I can translate from PHP and .NET code if need be. I'm sure this is purely Javascript but still ;) In life truth does not matter. What really matters is what others believe to be the truth. (The Up and Comer - Book)
take the following as an example var cur_elem = -1; function resetElements(prt,cls,omit) { for(i=0;i<=prt.childNodes.length -1; i++){ if(i != omit) { prt.childNodes[i].className = cls; } } } function dosomething(e) { var code; if (!e) var e = window.event; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; target_elem = (!document.all) ? document.getElementById("testId") : document.all["testId"]; if(code == 38) { if(cur_elem >= 1) cur_elem -=1; target_elem.childNodes[cur_elem].className = "over"; resetElements(target_elem,"normal", cur_elem); target_elem.className = "activeList"; document.getElementById("notice").innerHTML = "Up:" + cur_elem + " .::. Element content:" + target_elem.childNodes[cur_elem].innerHTML + " .::. Total elements:" + target_elem.childNodes.length; } else if(code==40) { if(cur_elem <= target_elem.childNodes.length-2) cur_elem +=1; target_elem.childNodes[cur_elem].className = "over"; resetElements(target_elem,"normal", cur_elem); target_elem.className = "activeList"; document.getElementById("notice").innerHTML = "Down:" + cur_elem + " .::. Element content:" + target_elem.childNodes[cur_elem].innerHTML + " .::. Total elements:" + target_elem.childNodes.length; } } with defined styles like .normal { background-color:#ffffff; display:block; } .over { background-color:#990000; display:block; } .activeList {display:block} ul.def {display:none;} and with the following html:
* some value- some value 2
- some value 3
- some value 4
- some value 5
- some value 6
[empty]
be aware of the fact that the* elements MUST have no space between because of sum reason i dun understand(spaces are treated are child elements of the UL element in FF and opera.) This is a basic example ... further enhancements are up to you. Code? Yeah i love it fried together with a glass of wine.
- item 1
-
take the following as an example var cur_elem = -1; function resetElements(prt,cls,omit) { for(i=0;i<=prt.childNodes.length -1; i++){ if(i != omit) { prt.childNodes[i].className = cls; } } } function dosomething(e) { var code; if (!e) var e = window.event; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; target_elem = (!document.all) ? document.getElementById("testId") : document.all["testId"]; if(code == 38) { if(cur_elem >= 1) cur_elem -=1; target_elem.childNodes[cur_elem].className = "over"; resetElements(target_elem,"normal", cur_elem); target_elem.className = "activeList"; document.getElementById("notice").innerHTML = "Up:" + cur_elem + " .::. Element content:" + target_elem.childNodes[cur_elem].innerHTML + " .::. Total elements:" + target_elem.childNodes.length; } else if(code==40) { if(cur_elem <= target_elem.childNodes.length-2) cur_elem +=1; target_elem.childNodes[cur_elem].className = "over"; resetElements(target_elem,"normal", cur_elem); target_elem.className = "activeList"; document.getElementById("notice").innerHTML = "Down:" + cur_elem + " .::. Element content:" + target_elem.childNodes[cur_elem].innerHTML + " .::. Total elements:" + target_elem.childNodes.length; } } with defined styles like .normal { background-color:#ffffff; display:block; } .over { background-color:#990000; display:block; } .activeList {display:block} ul.def {display:none;} and with the following html:
* some value- some value 2
- some value 3
- some value 4
- some value 5
- some value 6
[empty]
be aware of the fact that the* elements MUST have no space between because of sum reason i dun understand(spaces are treated are child elements of the UL element in FF and opera.) This is a basic example ... further enhancements are up to you. Code? Yeah i love it fried together with a glass of wine.