为什么 event.preventDefault 不起作用

Question

这个问题已经被问过，并且之前已经回答过，但是这里之前给出的答案似乎都不能解决我的情况，因此我需要再次问，为什么没有正确阻止该事件？

document.addEventListener("input", event => {
   if(event.data == '#' || event.data == '+' || event.data == '.' || event.data == ';'){
       event.preventDefault();
       alert("Non-allowed character detected: " + event.data);
       return false;
    }
});

我尝试了不同的版本，例如我添加了

event.stopPropagation()

和

event.stopImmediatePropagation()

但没有任何改变。我做错了什么以及如何解决它？

知道我只是想停止某些字符的输入可能会有所帮助。

提前致谢

Answer 1

您的代码不会阻止输入，因为您正在使用

"input"

事件。事件监听器

"input"

在输入发生后触发，因此无法阻止其默认设置。

相反，使用

"keydown"

或

"keypress"

在操作之前触发，因此可以防止默认操作。

这是您的更新代码：

document.addEventListener("keydown", event => {
    if (event.key === '#' || event.key === '+' || event.key === '.' || event.key === ';') {
        event.preventDefault();
        alert("Non-allowed character detected: " + event.key);
        return false;
    }
});

此外，如果您想阻止某人使用

context menu

或

drag&drop

粘贴此类字符，您可以同时使用所有这些功能：

// Existing code for detecting keystrokes
 document.addEventListener("keydown", event => {
     if (event.key === '#' || event.key === '+' || event.key === '.' || event.key === ';') {
         event.preventDefault();
         alert("Non-allowed character detected: " + event.key);
         return false;
     }
 });

// Code to prevent pasting non-allowed characters
document.addEventListener("paste", event => {
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pastedData = clipboardData.getData('text');
    if (pastedData.includes('#') || pastedData.includes('+') || pastedData.includes('.') || pastedData.includes(';')) {
        event.preventDefault();
        alert("Non-allowed character detected in your paste: " + pastedData);
        return false;
    }
});

// Code to prevent drop non-allowed characters
document.addEventListener("drop", event => {
    var droppedData = event.dataTransfer.getData('text');
    if (droppedData.includes('#') || droppedData.includes('+') || droppedData.includes('.') || droppedData.includes(';')) {
        event.preventDefault();
        alert("Non-allowed character detected in your drop: " + droppedData);
        return false;
    }
});