Navigate focus using up/down key

Question

I have this little javascript tool that converts numbers into other bases in real time. It does this by calling an update function checkchangedec() , checkchangehex() and so forth each time a key is pressed in each of the text boxes. It works fine.

What I want to be able to do is 'move the focus' using the arrow keys. I have successfully done this before, using event.keyCode , but the problem is I am already calling function using the element's onkeydown and onkeypressed. I am not aware of a way of calling multiple functions through onkeydown or onkeypressed attributes.

Here is a JSFiddle of the number converter specifically, here is the input:

<input id="dec" onkeypress="return isNumberKey(event);" onkeydown=checkchangedec() value="10">

and the functions it calls:

function checkchangedec() {
setTimeout(

    function () {
        if (id('dec').value !== "") {
            id('hex').value = parseInt(id('dec').value, 10).toString(16);
            id('bin').value = parseInt(id('dec').value, 10).toString(2);
            id('cbi').value = parseInt(id('dec').value, 10).toString(id('cbival').value);
        }
    }, 20);
}   


function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
}
return true;

}

Here is an example of how I got this to work:

function navigate(up, down) {
            if (event.keyCode == 13 || event.keyCode == 40) document.getElementById(down).focus(); 
            if (event.keyCode == 38) {document.getElementById(up).focus(); document.getElementById(up).select();}
            if (event.keyCode == 39) randomize(); // the randomize() function gives a random number, 
                                                  // irrelevant to navigation

Here is the input box:

<input type="text" value="55EEFF" id="i_sco" onkeydown="navigate('i_col', 'i_ssi')"></input>

Answer 1

"I am not aware of a way of calling multiple functions through onkeydown or onkeypressed attributes."

You can get the same result by defining a new "wrapper" function that contains all the other functions you want to call when the event occurs. Then, just assign this new function to the onkeypress event.

HTML:

<input id="dec" onkeypress="click_function()" value="10">

JavaScript:

function click_function(event) {
    //first make sure a number key was pressed
    if(isNumberKey(event)) {
        checkchangedec();

        return true;
    } else
        //you can check event.keyCode again here for up/down
    }

    return false;  //will return false if a number key was not pressed
}

Does that help get you started in solving your problem?

Answer 2

You can get the functionality you want by modifying your checkchangedec , checkchangehex etc. functions

HTML:

<input id="dec" onkeypress="return isNumberKey(event);" onkeydown="checkchangedec(event)" value="10">

Javascript:

function checkchangedec(event)
{
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode == 40){
    var input = document.getElementById('hex');
    input.focus();
    input.select();
    return;
}
else if (charCode == 38)
    return; // there isn't an input above Decimal.

setTimeout(
    function () {
        if (id('dec').value !== "") {
            id('hex').value = parseInt(id('dec').value, 10).toString(16);
            id('bin').value = parseInt(id('dec').value, 10).toString(2);
            id('cbi').value = parseInt(id('dec').value, 10).toString(id('cbival').value);
        }
    }, 20);

}