僅支持數字的JavaScript Firefox Firefox解決方案

我需要一些幫助來清理一個在Firefox中導致問題的流行的香草JavaScript代碼。僅支持數字的JavaScript Firefox Firefox解決方案

下面哪個/ keyCode檢查似乎是關於最流行的香草JS解決方案，只允許數字爲input或textarea。

var charCode = (e.which) ? e.which : e.keyCode; 
if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
return false; 
} 
return true;

通過標籤上的onkeypress="return function(event);"調用。

但是，Firefox似乎將箭頭鍵綁定到onkeypress調用，而不是像其他瀏覽器那樣僅對onkeyup和onkeydown進行綁定。這意味着例如左箭頭鍵的charCode是37，但％（shift + 5）的charCode也是如此。更重要的是，這意味着方向鍵不能用於導航（向左或向右移動插入符/文本光標）。

然而，不同的是，左箭頭鍵具有keyCode 37，而％具有charCode和37which（如圖上http://www.asquare.net/javascript/tests/KeyCode.html）。所以，我是能夠使箭頭鍵的工作只是罰款通過執行以下操作：

if (charcode > 31 && (charcode < 48 || charcode > 57)) { 
if (e.keycode && e.keyCode > 36 && e.keyCode < 41) { 
    return true; 
} 
    return false; 
} 
return true;

不過，我覺得這是不是做的最好的還是乾淨的方法，並有可能被不同的處理多個鍵通過Firefox而不僅僅是方向鍵。什麼是更清潔的香草JS解決方案或至少檢查此功能中的箭頭鍵的方法？

非常感謝！

編輯：我只是想出的是，即使代碼解決它爲Firefox，它引入了一個新的問題，所有其他的瀏覽器，在這些現在允許輸入charCodes 37-40（即％）。似乎不是檢查keyCode，而是以相同的方式檢查charCode或which。

來源

2016-10-29 Toine Lille

你知道有' '？請注意，它阻止某些鍵的用戶界面不太友好：他們可能認爲鍵盤壞了。此外，他們仍然可以使用複製/粘貼（即使通過上下文菜單），所以你永遠不會完成。更好的是接受用戶輸入，並在之後驗證它，也許可以通過輸入附近的顏色指示或消息進行驗證。 – trincot

我確實知道，但這並不適合這裏的需求。另外，從我所知道的情況來看，其他非字符鍵似乎表現得很好（因爲它只是「onkeypress」使它們遠離輸入/文本區），而不是onkeydown和onkeyup。顯然只有數字纔會被輸入，並且如果他們複製/粘貼任何東西，它會將文本重置爲一個數字。然而，箭頭導航是必須的，Firefox是一個足夠流行的瀏覽器，讓我擔心至少確保這些工作很好。 –

我找到了原始代碼，因爲我正在尋找只使用輸入的數字進行的操作，而不僅僅是爲了防止其他字符被輸入原始代碼的目的（也適用於textareas而不是輸入）。然而，使用原始代碼是解決問題的最簡單最明確的方式，並要求提供更好的解決方案，因爲解決方案將保持不變。希望清除它。 :) –

我會建議不要阻止某些鍵，因爲我覺得它降低了用戶體驗。但鑑於這是你需要的，我建議不要依賴keyCode屬性。不僅有與之相關的兼容性問題，也沒有覆蓋的輸入可以進行，像用鼠標右鍵菜單的道，是deprecated：

此功能已經從Web標準中刪除。

的KeyboardEvent.keyCode只讀屬性代表制度和實施相關的數字代碼

相反，我建議使用input事件，該事件會觸發每次更改輸入值，然後以清潔的價值非數字，同時將光標放在發現第一個違規字符的地方。這給了大致相同的用戶體驗，並且對如何箭頭鍵，退格鍵，刪除，選擇，...等工作無不良影響：

document.querySelector('#num').addEventListener('input', function() { 
 
    var badCharPos = this.value.search(/\D/); 
 
    if (badCharPos == -1) return; // all OK 
 
    // remove offending characters: 
 
    this.value = this.value.replace(/\D/g, ''); 
 
    this.setSelectionRange(badCharPos, badCharPos); 
 
});

<input id="num">

來源

2016-10-29 16:32:13 trincot

僅支持數字的JavaScript Firefox Firefox解決方案

回答

相關問題