月度归档： 2016 年 7 月

ol自定义序号样式的方法

ol为有序列表元素，它的默认样式在前面会自动添加序号如1.、2.、3.等，本文介绍如何通过css及html5新增属性改变需要的样式以及编号规则等。

一、编号倒序（HTML5新增）
reversed属性可以指定编号为倒序：

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

二、指定编号起始值（HTML5新增）
start属性可以指定编号的初始值：

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

三、指定编号位置（内、外）
css属性list-style-position:inside;可以指定编号的位置，下面的列表的编号为inside（默认为outside），可以与上面两个例子对比一下，对齐方式有所不同。

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

四、自定义编号的值

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

五、自定义编号增量

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

六、自定义编号初始值
下面的例子中example的第一个li为12，后面依次是14、16、18，counter-reset和counter-increment两个属性的第二个值也可以为负值

counter-reset属性第二个值的默认值为0，表示初始值为0；counter-increment属性第二个值的默认值为1，表示增量为1。

<style>
ol.example{counter-reset: num 10;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

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是不同才会触发）。