您的位置：首页 > 教程笔记 > 前端笔记

点击方向键实现文本框焦点切换代码实例

2023-12-04 13:32:48 前端笔记 177

本章节介绍一下如何实现点击方向键即可实现切换文本框的焦点的效果。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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如何注册事件处理函数一章节。

##
声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至201542412@QQ.com举报，一经查实，本站将立刻删除。

上一篇：javascript什么是事件委托简单介绍

下一篇：点击实现选中指定元素的文本内容

相关推荐

最新推荐

热门推荐