【问题标题】:restrict a character to type in a text box限制字符在文本框中键入
【发布时间】:2010-06-17 07:08:24
【问题描述】:

我们如何限制一个字符在文本框中输入。

【问题讨论】:

  • 你能不能说的更清楚一点。您的意思是要限制用户在文本框中输入某些特定字符是吗?

标签: html


【解决方案1】:

您可以通过 javascript 执行此操作(因此如果 javascript 关闭,您将无法对其进行限制)

<input type="text" onkeyup="this.value = this.value.replace(/[^a-z]/, '')" />

这会将其限制为仅 a-z 字符。结帐regular expressions 看看你能做什么

【讨论】:

  • 请记住,此代码仅在客户端执行。服务器脚本必须准备好处理任何输入并拒绝无效字符。
  • 这需要正则表达式上的全局标志。这是因为人们可以按住一个键并让它在释放之前提交许多键按下事件(并添加许多数字),此时只有 1 个键按下事件发生......这意味着可能的许多不想要的字符中只有一个会被删除,因为没有全局标志,每次调用它只会替换 1 个。
【解决方案2】:

如果你有文本框,那么你必须处理onkeypress 事件

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

您可以使用以下功能来限制用户

    function keypresshandler(event)
    {
         var charCode = event.keyCode;
         //Non-numeric character range
         if (charCode > 31 && (charCode < 48 || charCode > 57))
         return false;
    }

【讨论】:

  • 我试过这种方法,发现你需要使用 onkeypress = 'return keypresshandler(event)' 才能工作。
【解决方案3】:

尽管仍有可能,但对于 HTML5,没有真正需要使用基于 JavaScript 的解决方案来满足此要求。

&lt;input type="text" name="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"&gt; 将根据 RegExp 模式限制允许的字符(在这种情况下:看起来有效的电子邮件地址)。

当用户尝试提交不符合要求的数据时,title 属性将用作警告/通知。

<form action="/add_country.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

请参阅documentation on HTML input element 了解更多信息。不过,并非所有浏览器都同样支持它(如 Safari)。

【讨论】:

  • 这不限制你可以输入的字符,它会在提交后验证内容。
【解决方案4】:

Ben Rowe 的答案确实是接近它的方法。但是,该字符将在被删除之前出现在文本框中。您可以使用oninput 而不是onkeyup 来防止这种情况发生:

<input type="text" oninput="this.value = this.value.replace(/[^a-z]/, '')" />

【讨论】:

    【解决方案5】:
       function isNumberKey1(evt)
    {
           var charCode = (evt.which) ? evt.which : event.keyCode;
          if ( char!=8(charCode < 65 || charCode > 106))
             return false;
    
             return true;
    }
    

    【讨论】:

    • 请在您的代码中添加一些描述。为什么您的解决方案优于其他已发布的解决方案?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-06-17
    • 2012-05-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-23
    • 1970-01-01
    相关资源
    最近更新 更多