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

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

Answer 2

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

输入形式的禁止字符？

2 个答案: