html5 input新类型在不同浏览器下的表现

html5新增了很多输入类型, 其中一个作用就是可以在不引入javascript的情况下限制用户输入的类型, 在不支持新特性的浏览器中, 他们会默认降级显示为一个标准的文本输入框

为input元素添加required属性表示该项为必填, 在表单提交的时候浏览器如果该项为空就会发出警告(如果为特殊类型的话没有required属性提交时也会发出警告)

1. autofocus

如果多个表单域都添加了autofocus属性, 在Safari上, 最后一个添加autofocus属性的表单域会被选中, 而在Firefox和Chrome上的表现恰好相反, 它们会选中第一个添加autofocus属性的元素. 如果网页中的表单中含有带有autofocus的表单域, 则会阻止空格键的默认行为(有的空格键默认行为是让网页下滚)

2. 在添加了required属性时在不同浏览器下的提示框样式和内容也不一样

3. type=number

如果该表单域输入的不是数字, Chrome不允许输入非数字内容,  而Safari允许输入非数字内容, 但是会弹出警告框, IE11则会在输入框失焦的时候清空内容

另外我觉得没怎么用过但是功能还是比较强大的一个属性:

pattern 可以让输入框只接受某种特定格式(使用正则表达式来定义)的输入, 如:

<input type="text" name="word" pattern = "[A-Za-z]" required>

表示用户只能输入字母, 否则会弹出警告框