标签： input

HTML5中input元素的支持类型

目前input元素定义了22种不同的type，它们在不同浏览器中的表现并不一致。本文主要用于在不同设备及浏览器中测试它们的区别。

不同类型的input在不同浏览器中表现的方式有所不同，尤其在移动浏览器中（有些类型会调用不同的键盘类型），下面所有的示例建议在不同的浏览器中测试。

一、文本类型（默认值）-text
这个没有什么好说的，text类型是input的默认类型，当input设置为一个不支持的类型或没有设置类型时，浏览器会将type设置为text

二、电子邮件类型-email
在提交表单时，会验证输入的是否符合电子邮件格式要求，但这个验证比较不准，必要时还需要通过代码进行验证

三、url类型-url
提交表单时会验证是否符合url

四、数字类型-number
只能输入数字，一般浏览器会出现上下三角按钮来控制数值的增减（这个可以通过css控制），也可以直接输入数字。number类型的input支持step属性表示一次增加或减少多少，min为最小值，max为最大值。如果用户手动输入，在输入时是可以突破这些界限的。

五、范围类型-range
在浏览器中多为一个滑杆（类似于调节音量的滑杆），同样支持min、max、step属性。

六、日期类型-date
可以选择年月日。

七、月份类型-month
可以选择年和月。

八、周类型-week
可以选择周和年。

九、时间类型-time
可以选择小时和分钟。

十、日期时间类型-datetime-local
可以选择年月日和时间（本地时间）。

十一、隐藏类型-hidden
不在页面上显示，用于传递一些不需要用户输入的值。

十二、搜索类型-search
这个与普通的text并没有什么区别。

十三、颜色类型-color
用于选取颜色，会调出调色板。

十四、电话类型-tel
用于输入电话号码，一般移动浏览器会自动调用数字键盘。

十五、密码类型-password
用于输入密码，显示为实心圆点或星号等。

十六、复选框-checkbox
可以同时选择多个值，可以通过点击取消。

十七、单选框-radio
只能选择一个值，再次单击也不能取消，只能通过单击相同name的其他radio来取消当前的radio。

十八、文件类型-file
用于选择文件。

十九、表单提交-submit
用于提交表单，与button外观一致。

二十、图片类型-image
在表单中显示图片。

二十一、重置类型-reset
重置表单的所有内容。

二十二、按钮类型-button
一个单纯的按钮，没有默认的事件。

Input Text键盘类事件触发结果总结

Input的键盘类事件（onkeydown、onkeyup等）触发的规则在不同浏览器下并不一致，本文总结了在IE9~IE11以及Chrome和Firefox下这些事件触发的规则。

本文Demo：https://www.lyz810.com/demo/inputKeyEvent/
下载对比表格：https://www.lyz810.com/demo/inputKeyEvent/inputEventCompare.xlsx

说明：本文中只考虑IE9~IE11以及Chrome和Firefox浏览器，文中的其他浏览器均指代上述范围内的浏览器。

一、oninput和onpropertychange

oninput是HTML5中针对input、textarea及select新增的事件，在IE9以上以及其他浏览器中可以使用。
老板本的IE（IE10及更早版本）中，支持使用onpropertychange事件来实时监听用户输入。
注意：onpropertychange事件会在input的任意一个属性变化时回调，所以使用时应判断哪个属性发生了变化。

二、IE中oninput的坑
在IE10以上的版本中（支持placeholder的IE），如果设置了placeholder，那么在input获取焦点时，如果原始值为空，则会触发oninput事件，因为IE的placeholder会在获取焦点时清空，而Chrome和Firefox不会（在输入第一个字符后，placeholder内容才会消失）。
同理，删除最后一个字符也会触发oninput（但这个是正常情况，毕竟input的值已经发生了改变）。

三、键盘事件触发顺序表

onkeydown onkeypress oninput onkeyup onchange onblur onpropertychange
IE9 1 2 3 5 6 7 4
IE10 1 2 4 5 6 7 3
IE11 1 2 3 4 5 6 –
Chrome 1 2 3 4 5 6 –
Firefox 1 2 3 4 5 6 –

总体看来，基本上都是down→press→input→up，但IE9和IE10的onpropertychange触发顺序是相反的，IE9会先触发oninput然后才是onpropertychange，IE10则是先触发onpropertychange，然后再触发oninput。

四、特殊按键触发表

onkeydown onkeypress onkeyup oninput onpropertychange
IE9 ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER ESC、ENTER ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER – –
IE10 ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER ESC、ENTER ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER DELETE、BACKSPACE DELETE、BACKSPACE
IE11 ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER ESC、ENTER ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER DELETE、BACKSPACE –
Chrome ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER ENTER ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER DELETE、BACKSPACE –
Firefox ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER ESC、ENTER、DELETE、BACKSPACE ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER DELETE、BACKSPACE –

测试了ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER按键，它们都可以触发onkeydown和onkeyup事件。
除IE9外，其他浏览器在两种删除按键下都可以触发oninput事件，IE10还可以触发onpropertychange事件（IE9都不能触发，要想监控到删除字符需要使用keydown）。
而onpress事件触发规则更是五花八门，IE下只有ESC和ENTER可以触发，Chrome只有ENTER能够触发，Firefox在ESC、ENTER、DELETE、BACKSPACE下都可以触发onpress事件。

五、剪切粘贴触发规则表

oninput onpropertychange
IE9 粘贴 粘贴
IE10 √ √
IE11 √ –
Chrome √ –
Firefox √ –

这里IE9仍保持着它的怪异风格，只有粘贴时会触发oninput和onpropertychange事件，剪切时并不会。
IE10和IE11以及其他浏览器剪切粘贴都可以触发oninput事件，而IE10还会触发onpropertychange事件。

六、总结
IE9认为输入框中的内容减少不触发oninput和onpropertychange事件，如删除和剪切，只有增加内容才会触发。
其他浏览器会在文本框内容改变时触发oninput事件。
IE的placeholder会导致初始文本框无内容时，获取焦点即触发oninput事件。
oninput和onpropertychange（IE专有）事件会同时触发，只是不同浏览器中触发顺序不同。
浏览器都是按照down→press→input→up的顺序触发，某些按键不触发其中的几个事件。
在press事件之前，按下的字符不会显示在文本框内，所以要禁止输入一些字符可以在onkeydown或onkeypress事件中阻止默认行为（建议在keydown中，因为keypress的触发规则不同，需要做一些兼容性处理）。
印屏幕键（print screen）只触发keyup不触发keydown。
Fn键不触发任何事件
onchange事件都是在onblur前触发（只有最终内容与focus是不同才会触发）。