Question

我有这个小工具，可以实时将数字转换为其他基础。它通过每次在每个文本框中按下键时调用更新函数checkchangedec()，checkchangehex()等来完成此操作。它工作正常。

我希望能够做的是使用箭头键“移动焦点”。我之前使用event.keyCode已成功完成此操作，但问题是我已经使用元素的onkeydown和onkeypressed调用函数。我不知道通过onkeydown或onkeypressed属性调用多个函数的方法。

Here是数字转换器的JSFiddle 具体来说，这是输入：

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

及其调用的函数：

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是我如何使其发挥作用的一个例子：

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 type="text" value="55EEFF" id="i_sco" onkeydown="navigate('i_col', 'i_ssi')"></input>

Answer 1

“我不知道通过onkeydown或onkeypressed属性调用多个函数的方法。”

您可以通过定义一个新的“包装器”函数来获得相同的结果，该函数包含您在事件发生时要调用的所有其他函数。然后，只需将此新函数分配给onkeypress事件。

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
}

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

Answer 2

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

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

}

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

2 个答案: