点击方向键实现文本框焦点切换代码实例
本章节介绍一下如何实现点击方向键即可实现切换文本框的焦点的效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
function is_down(e) {
var isDown;
switch (e.keyCode) {
case 13: //回车键
case 39: //向右移动键
case 40: //向下移动键
isDown = true;
break;
case 37: //向左移动键
case 38: //向上移动键
isDown = false;
break;
}
return isDown;
}
function key_up(e){
var e=e||window.event;
return is_down(e) === undefined ? true : handle_element(this, is_down(e));
}
function handle_element(field, is_down) {
var elements = field.form.elements;
for (var index = 0, len = elements.length-1; index < len; index++) {
if (field == elements[index]) {
break;
}
}
index = is_down ? (index + 1) % elements.length : (index - 1) % elements.length;
if((0===index && is_down)||(-1===index && !is_down)){
return true;
}
elements[index].focus();
var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];
if (element_arr.join(',').indexOf(elements[index].type) > -1){
elements[index].select();
}
return false;
}
document.onkeydown = function(e) {
e = e || window.event;
if(e.keyCode == 13) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
};
function addHandler(element, type, handler) {
if(element.addEventListener){
element.addEventListener(type, handler, false);
}
else if (element.attachEvent){
element.attachEvent("on" + type, handler);
}
else{
element["on" + type] = handler;
}
}
window.onload=function(){
var elements = document.forms[0].elements;
for(var index = 0, len = elements.length; index < len; index++) {
addHandler(elements[index], "keyup", key_up);
}
}
</script>
</head>
<body>
<form>
<div><input type="text"></div>
<div><input type="text" ></div>
<div><input type="text" ></div>
<div><input type="text" ></div>
<div><input type="text" ></div>
<div><input type="submit" ></div>
</form>
</body>
</html>
上面的代码实现了我们的功能，点击方向键可以实现切换焦点效果，点击回车键也可以实现。
一.代码注释:
1.function is_down(e) { var isDown;
switch (e.keyCode) {
case 13: //回车键
case 39: //向右移动键
case 40: //向下移动键
isDown = true;
break;
case 37: //向左移动键
case 38: //向上移动键
isDown = false;
break;
}
return isDown;
}，此函数用来判断焦点时向上移动还是向下移动，返回值是一个布尔值，如果是true则向上移动，否则是向下移动。当点击回车键或者向右和向下的方向键的时候就是向下移动焦点，当点击向左或者向上方向键的时候，焦点就是向上移动。
2.function key_up(e){
var e=e||window.event;
return is_down(e) === undefined ? true : handle_element(this, is_down(e));
}，用作事件处理函数，判断是否是点击的方向键和回车键，如果是则执行handle_element()进行切换焦点的操作，如果不是点击的这几个键，则返回true执行正常的操作。
3.function handle_element(field, is_down){}，此函数可以实现焦点的切换效果，第一个参数是当前焦点所在的元素对象，第二个参数是一个布尔值，用来规定焦点切换的方向。
4.var elements = field.form.elements，获取form表单下的所有表单元素。5.for (var index = 0, len = elements.length-1; index < len; index++) {
if (field == elements[index]) {
break;
}
},遍历每一个表单元素以此来判断当前表单元素在表单元素集合中的位置。
6.index=is_down ? (index+1) % elements.length: (index-1) % elements.length，使用求余的方式获取要切换到的表单元素索引。
7.if((0===index && is_down)||(-1===index && !is_down)){
return true;
}，如果是最后元素则不会再向下切换，如果是第一个元素则不会再向上切换。8.elements[index].focus()，是切换到的元素获取焦点。
9.var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea']，将表单元素的类型存入数组。
10.if (element_arr.join(',').indexOf(elements[index].type) > -1){
elements[index].select();
}判断当前元素的类型字符串是否在连接后的字符串中，如果在则选中当前表单元素中的内容。
11.document.onkeydown = function(e) {
var e = e || window.event;
if(e.keyCode == 13) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
},取消点击回车的默认动作，比如点击回车可能会使表单提交。
12.function addHandler(element, type, handler) {
if(element.addEventListener){
element.addEventListener(type, handler, false);
}
else if (element.attachEvent){
element.attachEvent("on" + type, handler);
}
else{
element["on" + type] = handler;
}
}兼容所有浏览器的注册事件处理函数。
13.window.onload=function(){
var elements = document.forms[0].elements;
for(var index = 0, len = elements.length; index < len; index++) {
addHandler(elements[index], "keyup", key_up);
}
}，为每一个表单元素注册keyup事件处理函数。
二.相关阅读:
1.keyCode可以参阅js的键盘按键keyCode属性值对应表一章节。
2.var e=e||window.event可以参阅var ev=window.event||ev的作用是什么一章节。
3.join()方法可以参阅javascript join()一章节。
4.indexOf()方法可以参阅javascript String indexOf()一章节。
5.preventDefault()方法可以参阅javascript preventDefault()一章节。
6.注册事件处理函数可以参阅javascript如何注册事件处理函数一章节。