如何将输入字段实时限制为小写字母、数字和短划线

Question

我想限制哪些字符可以输入表单的输入字段。该表单是使用WordPress中的Gravity Forms创建的，但这并不重要。

这是一个用户名字段，所以我想将字符限制为只有小写字母、数字和短划线。如果用户键入任何其他类型的数字，我不希望发生任何事情。

我是其中的一部分，但需要一些帮助来完成这项工作。

从这篇文章中，我提取并调整了以下代码：

<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8);  //Backspace
specialKeys.push(46); //Delete
specialKeys.push(35); //End
specialKeys.push(37); //Left
specialKeys.push(39); //Right

function IsAlphaNumeric(e) {
var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
var ret = ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>

表单输入字段如下：

<input name="input_16" id="input_1_16" type="text" value="" class="medium" maxlength="80" aria-describedby="gfield_description_1_16" aria-required="true" aria-invalid="false">

我在我的代码中做到了这一点：

jQuery(document).ready(function(){
jQuery("input_1_16").on("input", function(){
// Don't know what to do!
});
});

但正如您所看到的，我不知道如何更新输入字段来限制字符。有人能帮忙吗？

谢谢！

Answer 1

在这一行jQuery("input_1_16")中，您错过了id选择器，因此您应该像jQuery("#input_1_16")那样进行选择。另一件事是，您需要处理的事件是按键事件，而不是输入。

我希望这个代码能帮助你：

$(document).ready(function(){
$("#input_1_16").keypress(function(e){
if(!(/[a-z]|[0-9]|-/.test(e.key))){
e.preventDefault();
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input name="input_16" id="input_1_16" type="text" value="" class="medium" maxlength="80" aria-describedby="gfield_description_1_16" aria-required="true" aria-invalid="false">