Question

Again expecting your helps. Facing a small might be stupid problem. I am creating a small jQuery plugin for my work. That plugin should be with fully customizable. I almost complete everything other than this task.

Actually when user clicks on an input element and keydown the up and down arrow I need to increase and decrease values respectively. But which arrow key should be used is customizable. If the user selects ‘updown’ then up and arrow key should work. If user select ‘leftright’ then right and left arrow keys should work respectively to increase and decrease values. In this situation user needs to have up and right arrow keys to move the cursor right and left. Because now left and right arrow keys are being used for other purpose.

Actually I have a solution is can use caret position. But is there any other easy ways which may help to do this work easily.

PS: Sorry if my question confused any of you.

Answer 1

You can use an object to store the key codes.. something like this

<select id="keys" >
    <option value="updown"> Up - Down </option>
    <option value="leftright"> Left - Right</option>
</select>


var keys = {
    updown:{
        inc:38,
        dec:40
    },
    leftright:{
        inc:37,
        dec:39
    }
}

document.onkeyup = function KeyUp(e) {
    var selected = document.getElementById("keys");
    var keyCode = (window.event) ? event.keyCode : e.keyCode;
    if(keys[selected.value].inc === keyCode){
       alert("increase.........");
    }else if(keys[selected.value].dec === keyCode){
       alert("decrease.........");
    }
}

demo : http://jsfiddle.net/2qaJf/1/

note: please clear the focus of select element when you try the demo.