只接受輸入中的數字和字母

Question

我只想接受輸入中的字母，數字和逗號。

我已經試過

document.getElementById('input').onkeydown = function (e) { 
    const charCode = (typeof e.which === 'number') ? e.which : e.keyCode; 
    return (charCode >= 48 && charCode <= 57) || // numbers 
     (charCode >= 65 && charCode <= 90) || // letters 
     charCode === 188      // comma 
}; 

它的工作原理，但它也拒絕使用箭頭鍵，回車，刪除和退格（和潛在的其他重要的鍵）。

我可以添加另一個or子句，並告訴用戶是否按下了箭頭鍵，輸入，刪除或退格鍵，但這是正確的方法嗎？我是否缺少一些鑰匙？平板電腦，臺式機和智能手機的關鍵代碼是否相同？

編輯

，如果我還希望確保用戶永遠不會輸入兩個連續的逗號呢？所以它不會接受a,b,,c？

Answer 1

根據MDN，charCode和which都被棄用，他們推薦使用keyboardEvent.key。

有趣的是，您爲此問題標記了regex，但我沒有明確地在您的問題中看到正則表達式。但是，下面的示例應該足夠了。見String.prototype.match約在大多數瀏覽器原生支持正則表達式的詳細信息...

document.getElementById('input').onkeydown = function (e) { 
 
    var value = e.target.value; 
 
    //only allow a-z, A-Z, digits 0-9 and comma, with only 1 consecutive comma ... 
 
    if (!e.key.match(/[a-zA-Z0-9,]/) || (e.key == ',' && value[value.length-1] == ',')) { 
 
    e.preventDefault(); 
 
    } 
 
};

Type Value: <input id="input" type="text" />

你也可以使用character classes - 例如\d和\w，雖然\w包括下劃線（_）：

document.getElementById('input').onkeydown = function (e) { 
 
    var value = e.target.value; 
 
    //only allow a-z, A-Z, digits 0-9 and comma, with only 1 consecutive comma ... 
 
    if (e.key.match(/_/) || !e.key.match(/[\w\d,]/) || (e.key == ',' && value[value.length-1] == ',')) { 
 
    e.preventDefault(); 
 
    } 
 
};

Type Value: <input id="input" type="text" />