Question

我正在尝试避免在page.php上输入数字和字母以外的任何标记：

<input type="text" id="input">

根据此答案only allow English characters and numbers for text input <input type="text" id="input" class="clsAlphaNoOnly">：

$(document).ready(function () {
  $('.clsAlphaNoOnly').keypress(function (e) {  // Accept only alpha numerics, no special characters 
        var regex = new RegExp("^[a-zA-Z0-9 ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }

        e.preventDefault();
        return false;
    }); 
})

或者这个：

$(function(){
    $("#input").keypress(function(event){
        var ew = event.which;
        if(ew == 32)
            return true;
        if(48 <= ew && ew <= 57)
            return true;
        if(65 <= ew && ew <= 90)
            return true;
        if(97 <= ew && ew <= 122)
            return true;
        return false;
    });
});

在两种情况下，字符串都是清晰的，但是我使用两种类型的输入，单击按钮$("#btn").click(function()处理输入，使用$(document).keypress(function(e)敲击键盘上的Enter键以进行相同的输入。由于某种原因，如果我包括此方法以避免在字符串中出现多余的标记，则按Enter键不允许输入插入的值。

这种方式可以正常工作：

<input type="text" id="input"  onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode >= 48 && event.charCode <= 57)" />

但我想避免在html中使用page.php附加代码。我正在尝试找出是什么原因导致使用给定方法

阻止输入插入值

Answer 1

会告诉您可能错过事件参数吗？

没有jQuery在3种浏览器中对我来说都是这样的：

function clsAlphaNoOnly (e) {  // Accept only alpha numerics, no special characters 
    var regex = new RegExp("^[a-zA-Z0-9 ]+$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
        return true;
    }

    e.preventDefault();
    return false;
}
function clsAlphaNoOnly2 () {  // Accept only alpha numerics, no special characters 
    return clsAlphaNoOnly (this.event); // window.event
}

<input type="text" id="input" onkeypress="clsAlphaNoOnly(event)" onpaste="return false;">
<input type="text" id="input" onkeypress="clsAlphaNoOnly2()" onpaste="return false;">

Answer 2

一种验证方法是在pattern元素上使用input属性

MDN：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression

在您的情况下：

<input type="text" pattern="[a-zA-Z0-9]*">

Answer 3

您可以使用pattern和required来代替javascript。 pattern将允许您指定输入的必需模式，而required将使输入成为必需。两者都必须evaluate至true才能提交表单。

<form>
  <input type="text" id="input" pattern="[a-zA-Z0-9]+" required> 
  <input type="submit">
</form>

Answer 4

如果您真的不想使用Regex方法作为下面的注释建议，则可以使用以下简单代码：

document.querySelector("input#testInput").addEventListener("input", function(){
  const allowedCharacters="0123456789azertyuiopqsdfghjklmwxcvbnAZERTYUIOPQSDFGHJKLMWXCVBN"; // You can add any other character in the same way
  let newValue="";
  this.value.split("").forEach(function(char){
    if(in_array(char, allowedCharacters.split(""))) newValue+=char;
  });
  this.value=newValue;
});

function in_array(elem, array){
  let isIn=false;
  for(var i=0;i<array.length;i++){
    if(elem==array[i]) isIn=true;
  }
  return isIn;
}

<input type="text" id="testInput">

只允许数字和字母输入字符串

4 个答案: