0

我的目的是将简单 HTML 文本框中的用户输入（即自由文本）限制为 5 个字符。我正在使用输入字段的maxlength属性来确保这一点，但是当用户尝试输入超过 5 个字符时，我需要显示一个弹出窗口。

我试图处理keydown事件，但是为了不考虑 del、enter、F1..F12、Alt、Page Dn 等，必须放置一个丑陋的 if-else ......因为所有这些都是允许的，但它们对文本的长度没有贡献它们的键码也不在一个序列中。我试图在keyup上处理它，但是那个时候已经输入了这个字符，并且用户看到多余的字符消失了..这不是我想要的。

HTML5 之前的解决方案.. 可以在 IE7,8 上运行的东西会非常有用。

4

1 回答 1

2

maxlength在 gecko（例如 firefox）中，如果您使用该属性，浏览器会阻止该值变长，因此tooLong验证变量将永远是false（参见此处）。没有机会钩在那里。
但是您可以改用pattern-attribute ：

<input ... pattern="^.{0,max}$" />

max在正则表达式中替换pattern为允许的最大字符数。
现在您可以绑定input-event 并检查布尔element.validity.patternMismatch值是否过长。

这是我为您创建的两个示例的链接；它们是用当前版本的 Firefox 和 chrome 测试的，我不能用 IE9 测试：

  • 第一个例子：如果值太长，它将被剪切，并且会显示一秒钟的错误消息；一个小缺点是您可以在几分之一秒内看到输入。
  • 在第二个示例中，值将永远不会更改，将显示一条错误消息，直到字符数正确为止，并且您只能在所有字段都有效的情况下提交表单。

=== 更新 ===

对于 IE7 和 IE8 支持，我更新了示例：

于 2012-01-15T13:49:28.817 回答