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