如何避免在html中输入字母？ [复制]答案

【问题标题】：how to avoid typing letters in html? [duplicate]如何避免在html中输入字母？ [复制]
【发布时间】：2014-08-04 00:23:15
【问题描述】：

我们如何避免在 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 放在哪里？

【问题讨论】：

是的，你可以。就像你建议的那样。
是的，但是您总是需要重新验证服务器上的数据，因为标记不能保证任何事情。
我的意思是，当你在键盘上按字母时它不会显示出来。在我的示例中，用户可以输入任何字符。
@user3737597 这取决于您使用的浏览器。如果您希望它在跨浏览器中发挥相同的作用，您需要使用一些 javascript（并且仍然在服务器端验证它）
有什么方法可以禁用输入字母吗？可以举个例子吗？

标签： php html

【解决方案1】：

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

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

{10}这里最多允许10个数字

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

link

或者这里是通过 javascript 验证的方式，无需提交：

<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();
  }
}

为用户编辑（按回车检查数字）：

<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

【讨论】：

明白了！但是如何将 ENTER 键添加到该 [0-9] 值？
回车键是什么意思？你到底想做什么？
我想要的是当我在文本字段中输入数字并按 Enter 时，它会自动发送我输入的数字。我只想启用“ENTER KEY”，因为在这个例子中它只允许按下数字而不是“ENTER KEY”
这是你的 jsfiddle：jsfiddle.net/RC78z/105
如果对你有帮助请点个赞

【解决方案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;
});

【讨论】：

我有这个代码
@user3737597 抱歉，我没听懂你……？
对不起，我不小心按了回车...我把你的代码@T J 放在哪里？
在

【解决方案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，请使用以下“香草”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/

【讨论】：

对不起，我对 jQuery 不太熟悉，我们可以用 php 制作吗？
PHP 是服务器端的。 PHP 可以不阻止用户输入字母。
@user3737597 我刚刚用非 jQuery 解决方案更新了我的答案。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

使用模式。

对于字母：

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

数字

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

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

【讨论】：

您仍然可以在此处键入任何内容。它只是没有验证。
我忘了它在提交时验证，那么你最好的选择是 JS