防止在文本输入中插入无效字符

Question

我有一个带有标准文本元素的表单：

<form id="f">
    <input type="text" name="from" pattern="^[A-Za-z ]+$>
    <input type="text" name="to"   pattern="^[A-Za-z ]+$>
</form>

我想阻止用户将不允许的字符输入其中。例如，键入 0 应该没有效果。

我该怎么做？

Answer 1

$("#f input[type=text]").keypress( function(e) {
    new_text = $(this).val() + String.fromCharCode(e.which)
    pattern = $(this).attr("pattern")
    return Boolean(new_text.match(pattern))
})

如果新文本与pattern不匹配，则代码的工作方式是返回false，从而取消按键。使用function(e)代替(e) =>非常重要，因为后者会在词汇上绑定this，而我们希望让jQuery将this绑定到相应的input元素。