Javascript 使用向上/向下键导航焦点

我有一个小javascript工具，可以实时将数字转换为其他基数。它通过每次在每个文本框中按下一个键时调用更新函数checkchangedec、checkchangehex等来实现。它很好用

我希望能够使用箭头键“移动焦点”。我以前使用event.keyCode成功地完成了这项工作，但问题是我已经在使用元素的onkeydown和onkeypressed调用函数。我不知道如何通过onkeydown或onkeypressed属性调用多个函数

是数字转换器的JSFIDLE 具体来说，以下是输入：

以及它调用的函数：

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;

这是输入框：

---

我不知道如何通过onkeydown或onkeypressed属性调用多个函数

通过定义一个包含事件发生时要调用的所有其他函数的新包装函数，可以获得相同的结果。然后，将这个新函数分配给onkeypress事件

HTML:

---

这是否有助于您开始解决问题？

您可以通过修改checkchangedec、checkchangehex等函数来获得所需的功能

HTML:

---

我用这个函数替换了checkchangedec函数，但是箭头键仍然不起作用。谢谢你的帮助。这适用于调用函数，但导航不起作用。函数单击_function _decevent{//首先确保在imberkeyevent{checkchangedec；}时按了数字键else ifevent.keyCode==40 id'hex'.focus；id'hex'.select；//您可以在此处再次检查event.keyCode是否向上/向下返回false；//如果未按数字键将返回false}这是我尝试的，函数调用正常，但导航不起作用。我确实修改了我的HTML。@murtaza64这里有一个更新的小提琴，它按照您的要求工作：-诀窍是只为onkeydown事件分配一个事件处理程序。在这种情况下，我首先使用我创建的一个down_key变量检查是否按下了down键，以便于记忆，然后如果没有，我检查是否按下了数字键。如果是，则返回true，否则返回false。@murtaza64还有，提示：我调用了事件处理函数check\u input，因为如果稍加修改，可以对所有输入使用相同的函数。在函数中，可以使用this.id获取单击的元素的id。这个变量的性质是特殊的；它表示触发事件的元素—在本例中为输入框。但是，在您当前的代码中，除非重命名id函数，否则这将不起作用。因为它是一个全局函数，javascript将无法访问内置的this.id属性。@murtaza64这里有一个完整的工作示例，可以减少代码量，如果您感兴趣的话：谢谢：D我喜欢编程。

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

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

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
}

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

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);

}