输入表单中的禁止字符？答案

【问题标题】：Forbidden characters in input form?输入表单中的禁止字符？
【发布时间】：2012-04-24 06:03:37
【问题描述】：

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

<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 不好，因为它在输入实际更改之前运行脚本。

我怎样才能完全防止这些被禁止的字符出现在输入中？

【问题讨论】：

javascript limit text input characters 的可能重复项
请记住，这将不会禁止用户实际将它们发送到服务器，因此您还需要处理无效的输入服务器端
请不要理会用户界面。提交表单时您只需要适当的值，同时您不在乎它们是什么。在用户打字时弄乱值真的很烦人，而且是一种反可用性功能。无论如何，监控击键并不会阻止用户输入您不想要的字符。

标签： javascript

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用 keypress 事件和 blur 事件的组合来验证每个键和整个字符串。如果您将输入 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);

【讨论】：