up and down arrows javascript

Question

I'll explain what to do next , while here is html code =>

<fieldset>
         <legend>Get&nbsp;Data&nbsp;Ajax</legend>
         <form name="ajax" method="get" action="getData.php">
         <input type="text" name="getName" id="getName">
         </form>
         <div class="resBox" id="resBox"></div> <!-- this div is where results are placed-->
</fieldset>

I've written ajax script which is retrieving some info from mysql database onkeyup in input field and then I have done also how to collapse info down from this field. Here is the situation , can anyone explain how to do (when info already collapsed) that in up and down arrows could movement into info ? Please give an advice how to do that ?

In conclusion I am interested in how to handle javascript key events. please give some examples, thanks :)

I've tried like so but it is not working =>

var key;
if (window.event){
    key = e.keyCode;
} else {
    key = e.which;
}

if (key==13){ // enter for example 
    alert("something");
}

I got lost here - "can anyone explain how to do (when info already collapsed) that in up and down arrows could movement into info?" — Jibi Abraham, Mar 24 '12 at 12:16
in other words , when data has already been collapsed in marked place, how to movement cursor up and down with arrows , like this function has for example google youtube and etc — nanobash, Mar 24 '12 at 12:18
If this is not a learning exercise, you're probably better of with something like http://jqueryui.com/demos/autocomplete/ instead of creating your own. — Markus Hedlund, Mar 24 '12 at 12:20

score 2 · Accepted Answer · edited May 23 '17 at 12:27

This JS code should probably work in your context. See a working Demo here.

el = document.body;
if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keydown", function(evt) {
        doThis(evt.keyCode);
    }, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeydown", function(evt) {
        doThis(evt.keyCode);
    });
}

function doThis(key) {
    switch (key) {
        case 13:
            alert('enter pressed');
            break;
        case 27:
            alert('esc pressed');
            break;
        case 38:
            alert('up pressed');
            break;
        case 40:
            alert('down pressed');
            break;
    }
}

First of all consider reading this Stackoverflow question.
And you can read this MDN entry too.

up and down arrows javascript

1 Answers1