點選方向鍵實現文字框焦點切換程式碼例項

antzone發表於2017-04-01

本章節介紹一下如何實現點選方向鍵即可實現切換文字框的焦點的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function is_down(e) {
  var isDown;
  switch (e.keyCode) {
    case 13:  //Enter鍵
    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>

上面的程式碼實現了我們的功能，點選方向鍵可以實現切換焦點效果，點選Enter鍵也可以實現。

一.程式碼註釋:

1.function is_down(e) {  var isDown;

  switch (e.keyCode) {

    case 13:  //Enter鍵

    case 39:  //向右移動鍵

    case 40:  //向下移動鍵

      isDown = true;

      break;

    case 37:  //向左移動鍵

    case 38:  //向上移動鍵

      isDown = false;

      break;

  }

  return isDown;

}，此函式用來判斷焦點時向上移動還是向下移動，返回值是一個布林值，如果是true則向上移動，否則是向下移動。當點選Enter鍵或者向右和向下的方向鍵的時候就是向下移動焦點，當點選向左或者向上方向鍵的時候，焦點就是向上移動。

2.function key_up(e){

  var e=e||window.event;

  return is_down(e) === undefined ? true : handle_element(this, is_down(e));

}，用作事件處理函式，判斷是否是點選的方向鍵和Enter鍵，如果是則執行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如何註冊事件處理函式一章節。

相關文章