正则表达式系列(3)——案例：回车实现Tab跳转，超链接的单选效果，表格隔行变色，回车键跳转
程序员文章站
2024-02-24 11:45:52
...
1、案例1：回车实现Tab跳转。响应文本框的onKeyDown事件，window.event.keyCode获得用户点击的keyCode。keyCode和ASCII不是完全一致，主键盘的1和小键盘的1的ASCII一样，但是keyCode不一样。回车的keyCode为13，Tab的keyCode为9。if(window.event.keyCode == 13){window.event.keyCode = 9;}
keyCode里面的ASCII码说明：
- 8：退格键
- 46：delete
- 37-40： 方向键
- 96-105：小键盘区的数字
- 48-57：主键盘区的数字
- 110、190：小键盘区和主键盘区的小数点
- 189、109：小键盘区和主键盘区的负号
- 13：回车
- 9： Tab 就是那个把焦点移到下一个文本框的东东。
<body οnkeydοwn="if(window.event.keyCode==13){window.event.keyCode=9;}">只有少数的键才能被替换，大部分是不行的，有权限问题。
2、练习1：超链接的单选效果：
<script type="text/javascript">
function btn_Click(btn) {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link == btn) {
link.style.background = "red";
}
else {
link.style.background = "white";
}
}
}
</script>
<a href="javascript:void(0)" οnclick="btn_Click(this)">点我</a><br />
<a href="javascript:void(0)" οnclick="btn_Click(this)">点我</a><br />
<a href="javascript:void(0)" οnclick="btn_Click(this)">点我</a><br />3、练习2：表格隔行变色
function changeColor() {
var table = document.getElementById("table1");
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
var td = trs[i];
td.style.background = "yellow";
}
}
}
<table id="table1">
<tr><td>tom</td><td>30</td></tr>
<tr><td>jim</td><td>20</td></tr>
<tr><td>lily</td><td>22</td></tr>
<tr><td>lucy</td><td>23</td></tr>
<tr><td>mike</td><td>25</td></tr>
</table>4、练习3：回车键跳转：
<script language="javascript" for="document" event="onkeydown">
if(event.keyCode==13)
event.keyCode=9;
</script>