试图防止无效的按键(而不是数字)和多个小数点

Question

到目前为止，我使用它来调用函数：

document.getElementById("dzCalculator").addEventListener("keydown", isNumberKey);
function isNumberKey(txt, evt) {
let charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode == 46) {
evt.preventDefault();
//Check if the text already contains the . character
if (txt.value.indexOf('.') === -1) {
return true;
} else {
return false;
}
} else {
if (charCode > 31 &&
(charCode < 48 || charCode > 57))
return false;
}
return true;
}

但不幸的是，我得到了错误：未捕获的类型错误：evt是未定义的

我仍然处于学习阶段，所以我还没有看到我错过了什么。非常感谢你的帮助。

Answer 1

addEventListener只将触发它的事件传递给传递的回调，因此在您的情况下，txt持有该事件，而evt未定义。

您可以使用evt.target.value提取输入的txt值。

document.getElementById("dzCalculator").addEventListener("keydown", isNumberKey);
function isNumberKey(evt) {
let txt = evt.target.value;
//...

至于你的逻辑的其余部分，已经有一些好的答案：

HTML文本输入只允许数字输入

---

由于您仍在寻找限制输入的解决方案，我将提供此解决方案。您可以在设置密钥后验证该值，而不是控制允许的密钥。使用input侦听器，我们可以在不显示无效字符的情况下观察更改和验证，同时还可以解决维护预期功能和可访问性的首要问题，而无需指定所有关键响应。

此代码段使用input侦听更改。当被触发时，它使用event.target.value提取当前值并存储当前光标位置。然后，它使用析构函数[...value]将字符串重铸为数组。然后使用filter()对该数组进行过滤，使其仅包含出现在validKeys字符串中的字符。然后使用reduce()将其还原为字符串，此时它会考虑重复的小数点。如果得到的editedValue不同于初始value，则更新evt.target.value，并将光标设置回原来的位置(减1，因为我们已经删除了一个字符(；

document.getElementById("dzCalculator").addEventListener("input", isNumberKey);
function isNumberKey(evt) {
const validKeys = '1234567890.';

const cursorLocation = evt.target.selectionStart;
const value = evt.target.value;

let editedValue = [...value]
.filter(char => validKeys.includes(char))
.reduce((acc, char) => { return acc.includes('.') && char === '.' ? acc : acc + char}, '');

if (editedValue !== value) {
evt.target.value = editedValue;
evt.target.selectionStart = cursorLocation-1;
evt.target.selectionEnd = cursorLocation-1;
}
}

<input id="dzCalculator" value="" />

为了适应负值，您可以调整validKeys和reduce()回调，从而：

const validKeys = '-1234567890.';
let editedValue = [...value]
.filter(char => validKeys.includes(char))
.reduce((acc, char, i) => { 
if (acc.includes('.') && char === '.' || char === '-' && i !== 0) {
return acc
} else {
return acc + char
}
}, '');

Answer 2

我编写了非常简单的逻辑，只允许数字输入，并仅用一个点限制输入。

document.getElementById("dzCalculator").addEventListener("keydown", isNumberKey);
function isNumberKey(evt) {
let passCode = '0123456789.'
if (passCode.indexOf(evt.key)===-1 && evt.key !=='Backspace' && evt.key !== 'Tab'&&
evt.key !=='Delete'){
evt.preventDefault();
return false;
}else{
//contains numbers && dots
if (evt.target.value.indexOf('.') >= 0 && (evt.key === ".")) {
//check for multiple dots
evt.preventDefault();
return false;
} else
return true;
}
}

<input id='dzCalculator' type='text'>