Chrome独有的input标签扩展属性required?

输入框required属性在Chrome中的自动验证行为

最新推荐文章于 2023-12-29 10:33:47 发布

原创最新推荐文章于 2023-12-29 10:33:47 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #input #扩展 #xhtml #html #action

本文探讨了在Chrome浏览器中使用required属性于<input type=text>标签时，其如何在提交表单前自动检测输入值的空缺，并在值为空时阻止表单提交，直至用户输入有效内容。通过提供一个完整的模拟代码示例，直观展示了这一特性的工作原理。

今天调试一段JS的兼容性时偶然发现，<input type="text">标签加上“required” ，即：

在Chrome(版本:5.0.375.55)下提交时会自动检测它的值是否为空，如果为空则会focus到这个控件上，等待用户输入。

下面给一段完整模拟代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <form action="" method="get" onsubmit="alert('Hi!')"> <input type="text" value="" required /> <input type="submit" value="submit" /> </form> </body> </html>

提交后发现：onsubmit事件之前，Chrome先检测了输入框中的值是否为空。如果为空则执行到onsubmit中的语句，即不会弹出"Hi"。

只有当输入框中有内容时，才会触发onsubmit事件。

删除required，则不会检测。

目前本人没有找到更多关于这方面的资料，请有知道的多多指教。