使用Javascript将我的html输入限制为仅文本，并以其他方式提醒用户？

Question

因此，基本上我已经在HTML中为人员的姓氏和名字创建了输入字段。 我希望此字段将他们的输入限制为仅文本，并给他们警报，否则请使用香草JS。

这是HTML代码：

<div>
        First Name:<br> <input id="name" type="text" placeholder="Type Here" pattern="[A-Za-z]"><br>
        Last Name:<br> <input id="name" type="text" placeholder="Type Here" pattern="[A-Za-z]">
</div>

如您所见，我以前曾尝试使用在另一篇文章中看到的pattern =“”方法来限制输入，但无法使其正常工作。 对此的建议也将不胜感激。

这是我现在的JS函数：

var nameinput=document.getElementById('name').value;
var input=function(field){
    if(isNaN(field)===false || field===""){
        alert('Please Enter Your Name');
        return false;


    }
}
input(nameinput)

这可能很明显。 我对JS很陌生，但是任何帮助将不胜感激！

Answer 1

如果您希望它一直进行检查，请尝试实现自定义onChange回调，即<input type="text" name="firstName" onChange="verif()"> ，或者，如果您仅希望在提交时进行验证时间，将onSubmit="verif()"到您的表单中。 对于这两种情况， verif（）函数看起来像

function verif(){
  var firstName = document.getElementByName("firstName")[0].value;
  if(!firstName.match(/[\A-Za-z]+/i)) {
    alert("You can only enter characters");// Or whatever message
    document.getElementByName("firstName")[0].focus();
  }
  var lastName = document.getElementByName("lastName")[0].value;
  if(!lastName.match(/[\A-Za-z]+/i)) {
    alert("You can only enter characters");// Or whatever message
    document.getElementByName("lastName")[0].focus();
  }
}

顺便说一句，此代码假定您在输入中使用了name属性，应该始终将其与输入一起使用。 您也不应使用两次相同的ID。