如何在Javascript中檢查特定範圍內的KeyboardEvent.key

在JavaScript中，我有keydown事件的回調函數。我使用keyCode和which屬性來檢測用戶按下了哪些鍵。如何在Javascript中檢查特定範圍內的KeyboardEvent.key

var keyPressed = event.keyCode || event.which; 
if (keyPressed > 47 && keyPressed < 58) { 
    //do something 
}

它運作良好。但是，這個屬性已經過時，我切換到key屬性。當我替換代碼時，它無法正常工作。

if (event.key > 47 && event.key < 58) { 
     //do something 
}

我無法在範圍內檢查用戶的按鍵。

來源

2016-08-15 Le Thanh

對於可打印字符，.key()回報a non-empty Unicode character string containing the printable representation of the key。

本質上：對於ASCII字符，你得到的是字符本身，而不是它的ASCII碼。

因此，對於數字你可以只是做：

var myInput = document.getElementsByTagName('input')[0]; 
 

 
myInput.addEventListener("keydown", function(event) { 
 
    if(event.key >= "0" && event.key <= "9") { 
 
    console.log('digit: ' + event.key); 
 
    } 
 
});

<input>

對於字母，你還必須檢查.key()返回單個字符，因爲非打印鍵，例如delete將被編碼爲"Delete"，其將通過測試"Delete" >= "A" && "Delete" <= "Z"。

var myInput = document.getElementsByTagName('input')[0]; 
 

 
myInput.addEventListener("keydown", function(event) { 
 
    if(event.key.length == 1 && event.key >= "A" && event.key <= "Z") { 
 
    console.log('capital letter: ' + event.key); 
 
    } 
 
});

<input>

來源

2016-08-15 13:29:57 Arnauld

它糾正了數字和字符。但是，我使用（event.key> =';'&& event.key <='''）（範圍從186到192）進行檢查，它獲得了其他範圍外的關鍵字。 –

此外，如果我檢查（event.key> ='A'&& event.key <='Z'），所有其他鍵，如「delete」，「end」，「tab」等仍然在此範圍內。 –

@LeThanh - 請參閱我更新的答案，以大寫字母爲例。關於你的第一條評論，我不明白。字符「;」到「'」覆蓋範圍59至96. – Arnauld

根據 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

「的KeyboardEvent.key只讀屬性返回由用戶按下的鍵或鍵的值。」

返回的值是字符串。如果你想檢查範圍，你可能不得不繼續使用key.code。

或者，也可以在例如使用switch語句像MDN

switch (event.key) { 
    case "ArrowDown": 
     // Do something for "down arrow" key press. 
     break; 
    case "ArrowUp": 
     // Do something for "up arrow" key press. 
     break; 
    case "ArrowLeft": 
     // Do something for "left arrow" key press. 
     break; 
    case "ArrowRight": 
     // Do something for "right arrow" key press. 
     break; 
    case "Enter": 
     // Do something for "enter" or "return" key press. 
     break; 
    case "Escape": 
     // Do something for "esc" key press. 
     break; 
    default: 
     return; // Quit when this doesn't handle the key event. 
    }

或事件仍然讓喜歡

var validKeys = ["ArrowDown", "ArrowUp", ...]

，然後一個數組檢查，看看是否event.key在陣列。

最後，你可以使用正則表達式

這應該工作

<script type="text/javascript"> 

     document.addEventListener('keydown', function(event){ 
     var charTyped = event.key; 
     if (/^[a-z\d]$/i.test(charTyped)) { 
      console.log("Letter or number typed: " + charTyped); 
     } 
     }) 


</script>

來源

2016-08-15 13:15:22 xerotolerant

代碼將是長期的，如果我想查字符，0-9和一些特殊的關鍵。我不想使用不推薦使用的屬性，如event.keyCode。屬性event.code返回DOM字符串，所以它也不能使用。有沒有其他方法？ –

http://stackoverflow.com/questions/2257070/detect-numbers-or-letters-with-jquery-javascript 這個答案使用了一個正則表達式，你可能能夠檢查這個關鍵。我會再讀一點，回到你身邊。 – xerotolerant

使用正則表達式在我的測試中工作。更新我的答案以反映這一點。 – xerotolerant

如何在Javascript中檢查特定範圍內的KeyboardEvent.key

回答

相關問題