Question

我们怎样才能避免在html标签中输入字母或数字？我们是否还需要在PHP中创建一个代码块以避免它？或者我们可以通过html禁用它，就像这样：

    <input type="text" />

而不是这样做我们可以这样做吗？

    <input type="number" />

如果你按任何字母，就不会出现字母。

<body>
<table>
<tr>
    <td>this is for text</td><td><input type="text" size="5" maxlength="5"></td>
    <td>this for numbers</td><td><input type="number" size="5" maxlength="5"></td>
</tr>
</table>
</body>

任何想法？我应该把javaScript放在哪里？

Answer 1

您可以对SUBMIT上的数字使用此验证：

pattern="[0-9]{10}"

{10}此处允许最多10个数字

请查看Regex备忘单了解更多信息：

link

或者这是通过javascript验证没有SUBMIT的方式：

<input type='text' onkeypress='validate(event)' />

  function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

为用户编辑（按Enter键检查数字）：

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

$('#txtTextBox').keypress(function(event){
    var regex = /[0-9]|\./;
    var text = $("input[type=text]").val();
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13' && !(regex.test(text))) {
     alert('You pressed a "enter" key in textbox'); 
}
});

<强>的jsfiddle：

link

Answer 2

您可以绑定按键事件处理程序并使用客户端脚本检查密钥代码。返回false将阻止输入。以下是javascript中的示例

 element.onkeypress(function(e){
   var keycode = e.which;
         /* 48-57: 0 -9
            8:backspace */
   if((keycode >= 48 && keycode <= 57) || keycode == 8 )
      return true;
   return false;
});

Answer 3

<input type="number" />完全有效。但是，它仍然允许用户键入字母。这是jQuery的解决方案：

$("#myInput").keydown(function(e){
    if(((e.keyCode < 48) || (e.keyCode > 57))&& e.keyCode != 8){
        e.preventDefault();
    }
});

小提琴：http://jsfiddle.net/yC7un/1/

如果您不使用jQuery，请使用以下“vanilla”JS：

document.getElementById("myInput").onkeydown=function(e){
    if(((e.keyCode < 48) || (e.keyCode > 57))&& e.keyCode != 8){
        return false;
    } return true;
};

小提琴：http://jsfiddle.net/yC7un/2/

Answer 4

某些浏览器仍会允许字母作为输入，但在表单提交时不会验证。正如科尔伯顿所说，你的建议是最正确的方式。

你可以制作一个javascript onkeydown-function来检查用户的输入并覆盖它。

Answer 5

使用模式。

对于信件：

<input type="text" pattern="[A-Za-z]" />

代表数字

<input type="text" pattern="[0-9]" />

仅适用于HTML5和输入类型“文本，搜索，网址，电话，电子邮件和密码”，对于较旧的浏览器，您应该使用JS / jQuery。

如何避免在HTML中键入字母？

5 个答案: