javascript - 输入表单中的禁止字符？

Question

这是我当前的代码，当用户键入时，它会从输入中删除除 $、逗号和点之外的所有非数字字符：

<input type="text" id="price" name="price" onkeyup="updatePrice(this.value)">

function updatePrice(p) {
    document.getElementById("price").value = p.replace(/[^0-9$.,]/g, '');
    }

问题是它在输入字符后会删除字符，所以如果你输入 A，你会在它消失之前看到它的几分之一秒。Keydown 不好，因为它在输入实际更改之前运行脚本。

如何完全防止这些禁止字符出现在输入中？

Answer 1

您可以使用 keypress 事件和 blur 事件的组合来验证每个键和整个字符串。如果您将输入更改为 be type，type="number"则用户代理将负责确保该值在更现代的浏览器中对您来说是有效的数字格式。

// on key press occurs before the text is added visually to the input field
​document.getElementById('price').addEventListener('keypress', function(e) {
  if(!String.fromCharCode(e.which).match(/[0-9$\.,]/)) {
    e.preventDefault(); // not a valid character so cancel it
  }
}, false);​​​​​​​​​​​​​

// complete validation for the text that was entered on blur to update price
document.getElementById('price').addEventListener('blur', function(e) {
  var validated = parseFloat(this.value.replace(/[^0-9\.]g/, ''));
  // ... use the validated string to do something
}, false);

​</p>

Answer 2

• 用于onblur在输入失去焦点时执行验证 - 用户在键入时不必意识到这一点。
• 用户根本不必知道这一点 - 您可以在提交时执行验证。