为什么输入事件的 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;
    }
});

或者如果你真的想使用

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

这不一定是您正在寻找的答案，但您可以在正则表达式的帮助下做同样的事情。使用

match

查明输入是否包含受限制的字符，如果有，请在

replace

的帮助下将其删除。

const input = document.getElementById('inp');
document.addEventListener("input", event => {
  if (event.data != null) {
    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'>

Answer 3

Ad Kobra 提到，您需要在

keydown

事件期间捕获钥匙。

我修改了他们的回复如下；特殊性将按键检查与事件处理程序解耦。

const DISALLOWED_KEYS = new Set(['#', '+', '.', ';']);

const disallowedList = document.querySelector('#disallowed');

renderKeys(disallowedList, DISALLOWED_KEYS);

document.addEventListener('keydown', handleKeyDown);
document.addEventListener('paste', handlePaste);
document.addEventListener('drop', handleDrop);

function handleKeyDown(event) {
  if (isKey(event.key)) {
    event.preventDefault();
    console.error("Disallowed character detected: " + event.key);
    activateKey(event.key);
    return false;
  }
}

function handlePaste(event) {
  const clipboardData = getClipboardData(event);
  const pastedData = clipboardData.getData('text');
  if (containsKey(pastedData)) {
    event.preventDefault();
    console.error("Disallowed character detected in paste: " + pastedData);
    return false;
  }
}

function handleDrop(event) {
  const droppedData = event.dataTransfer.getData('text');
  if (containsKey(droppedData)) {
    event.preventDefault();
    console.error("Disallowed character detected in drop: " + droppedData);
    return false;
  }
}

function renderKeys(el, keys) {
  for (let key of [...keys].sort()) {
    el.insertAdjacentHTML('beforeend', `
      <li>
        <kbd data-key="${key}">${key}</kbd>
      </li>
    `);
  }
}

function activateKey(key) {
  const kbd = disallowedList.querySelector(`kbd[data-key="${key}"]`);
  kbd.classList.add('active');
  setTimeout(() => { kbd.classList.remove('active'); }, 100);
}

const isKey = (s) => DISALLOWED_KEYS.has(event.key);
const containsKey = (s) => DISALLOWED_KEYS.values().some(k => s.includes(k));

function getClipboardData(event) {
  return event.clipboardData ||
         window.clipboardData || 
         event.originalEvent.clipboardData;
}

.as-console-wrapper {
  max-height: 4rem !important;
}

ul#disallowed {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}

ul#disallowed li {
  margin: 0;
  padding: 0;
}

kbd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  border: 0.25rem solid grey;
  border-top-width: 0.125rem;
  padding: 0.125rem;
  font-family: monospace;
}

kbd.active {
  background: darkgrey;
  border-color: yellow;
  border: 0.25rem solid black;
  border-bottom-width: 0.125rem;
}

<input type="text" placeholder="Something (except [#+.;])">
<hr>
<h2>Disallowed Keys</h2>
<ul id="disallowed"></ul>