使用上/下鍵導航焦點

我有這個小的JavaScript工具，實時將數字轉換爲其他基地。它通過每次在每個文本框中按下一個鍵時調用更新函數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

這裏是輸入框：「我不知道，呼籲通過的onkeydown或onkeypressed屬性的多個功能的一種方式」

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

來源

2013-05-20 murtaza64

感謝：d我愛編程。 – murtaza64

您可以通過定義一個新的「包裝器」函數來獲得相同的結果，該函數包含事件發生時要調用的所有其他函數。然後，將這個新功能分配給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 
}

這是否幫助你解決你的問題開始了嗎？

來源

2013-05-20 18:26:22 sgroves

謝謝。這適用於調用功能，除了導航不起作用。 – murtaza64

'function click_function_dec（event）{ //首先確保數字鍵被按下 if（isNumberKey（event））{ checkchangedec（）; } else if（event.keyCode == 40） id（'hex'）。focus; id（'hex'）。select; //你可以檢查事件。keyCode再次在這裏上/下返回false; //如果數字鍵未被按下，將返回false }'是我嘗試過的，函數調用正常，但導航不起作用。我修改了我的HTML。 – murtaza64

[Updated]（http://jsfiddle.net/murtaza64/wrrGW/5/）JSFiddle – murtaza64

您可以通過修改你的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); 

}

來源

2013-05-20 18:36:10 Rahler

我更換了'checkchangedec'函數，但方向鍵仍然不起作用。感謝幫助。 – murtaza64

使用上/下鍵導航焦點

回答

相關問題