输入表单中的禁止字符

Forbidden characters in input form?

本文关键字：禁止 字符 表单 输入      更新时间：2023-09-26

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

<input type="text" id="price" name="price" onkeyup="updatePrice(this.value)">
function updatePrice(p) {
    document.getElementById("price").value = p.replace(/[^0-9$.,]/g, '');
    }

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

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

  • 使用 onblur 在输入失去焦点时执行验证 - 用户在键入过程中不必意识到这一点。
  • 用户完全不必意识到这一点 - 您可以在提交时执行验证。

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

​

相关文章：