如何正确防止事件默认？

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;
    }
});

或者如果你真的想使用

input

，也可以，但首先会写入内容，然后从输入中删除：

// Listen to input event
inputField.addEventListener('input', function(event) {
    var value = event.target.value;
    // Check for disallowed characters
    if (value.includes('#') || value.includes('+') || value.includes('.') 
    || value.includes(';')) {
        alert("Non-allowed character detected.");
        // Remove disallowed characters
        event.target.value = value.replace(/[\#\+\.;]/g, '');
    }
});

Answer 2

这不一定是您正在寻找的答案，但您可以在

RegEx

的帮助下做同样的事情，就像这样-

const input= document.getElementById('inp');
document.addEventListener("input", event => {
   if((event.data).match(/[+#;.,]/g)){
   console.log(event.data);
        input.value= input.value.replace((event.data).match(/[#+.;]/g), '');
       alert("Non-allowed character detected: " + event.data);
       return false;
    }
});

<input id="inp" type='text'>