JavaScript键盘回车事件支持和Vue键盘回车支持

一.效果图

二.核心代码

2.1 vue核心逻辑api-enterfocus.js文件

//回车更换焦点
let _typeCode = "enter";
let _queryKey = "[focus]";

let enterSort = 0;
let enabled = true;

window.focusList = {};

const _downKeyEnter = function(e) {
  if (!enabled) {
    return;
  }
  if (e.keyCode == _typeCode) {
    let sKey = enterSort + 1;
    sKey = sKey > Object.keys(focusList).length ? 1 : sKey;
    let el = focusList[sKey];
    if (el) {
      if (el.tagName.toLowerCase() == 'input' && (el.getAttribute("type") == 'text' || el.getAttribute(
          "type") == null)) {
        el.focus();
      } else { // if((el.tagName.toLowerCase() == 'input'&&el.getAttribute("type")=='button')||el.tagName == 'button')
        enterSort = sKey;
        el.click();
      }
      console.log(sKey);
    }
  }
}

//节点更新时调用，
const enterFocus = function(queryKey, isEnter) {
  isEnter = isEnter == false ? false : true;
  _typeCode = isEnter ? 13 : 9;
  //更新后重新获取
  window.focusList = {};

  _queryKey = queryKey ? queryKey : _queryKey;
  let doc = document.querySelectorAll(_queryKey);
  let count = 0;
  for (let i = 0; i < doc.length; i++) {
    let key = doc[i].getAttribute("focus") || (count + 1);
    focusList[key] = doc[i];
    doc[i].onfocus = function() {
      if (doc[i].tagName.toLowerCase() == 'input')
        enterSort = parseInt(key);
    };
  }
  try {
    window.removeEventListener("keydown", _downKeyEnter);
  } catch (e) {}
  window.addEventListener("keydown", _downKeyEnter);
}

export default {
  install(Vue) {
    Vue.prototype.$enterFocus = enterFocus;
  }
};

2.2 非vue核心逻辑 api-enterfocus.js文件

(function(wind) {

  //回车更换焦点
  let _typeCode = "enter";
  let _queryKey = "[focus]";

  let enterSort = 0;
  let enabled = true;

  wind.focusList = {};

  const _downKeyEnter = function(e) {
    if (!enabled) {
      return;
    }
    if (e.keyCode == _typeCode) {
      let sKey = enterSort + 1;
      sKey = sKey > Object.keys(focusList).length ? 1 : sKey;
      let el = focusList[sKey];
      if (el) {
        if (el.tagName.toLowerCase() == 'input' && (el.getAttribute("type") == 'text' || el.getAttribute(
            "type") == null)) {
          el.focus();
        } else { // if((el.tagName.toLowerCase() == 'input'&&el.getAttribute("type")=='button')||el.tagName == 'button')
          enterSort = sKey;
          el.click();
        }
        console.log(sKey);
      }
    }
  }

  //节点更新时调用，
  const enterFocus = function(queryKey, isEnter) {
    isEnter = isEnter == false ? false : true;
    _typeCode = isEnter ? 13 : 9;
    //更新后重新获取
    wind.focusList = {};

    _queryKey = queryKey ? queryKey : _queryKey;
    let doc = document.querySelectorAll(_queryKey);
    let count = 0;
    for (let i = 0; i < doc.length; i++) {
      let key = doc[i].getAttribute("focus") || (count + 1);
      focusList[key] = doc[i];
      doc[i].onfocus = function() {
        if (doc[i].tagName.toLowerCase() == 'input')
          enterSort = parseInt(key);
      };
    }
    try {
      wind.removeEventListener("keydown", _downKeyEnter);
    } catch (e) {}
    wind.addEventListener("keydown", _downKeyEnter);

  }
  wind.enterFocus = enterFocus;
})(window);

三.使用方式

3.1 创建需要更换的节点 (添加focus属性，属性值必须为数字且值之间必须连续)

 <input focus="1" placeholder="1" />
      <div>
        <input focus="3" placeholder="3"  />
      </div>
      <div>
        <input focus="2"  placeholder="2" />
      </div>
      <div>
        <input focus="4"  placeholder="4" />
      </div>
      <div>
        <input focus="5"  placeholder="5" />
      </div>

      <div>
        <input focus="7" onclick="alert('7')" type="submit" value="提交7"></input>
        <input focus="8" onclick="alert('8')" type="button" value="提交8"></input>
      </div>
      <div>
        <div focus="6" onclick="alert('你好')">提交6</div>
      </div>

3.2 vue使用方法api-enterfocus.js文件

在main.js中引用

//添加回车支持
import enterFocus from '@/API/api-enterfocus.js';
Vue.use(enterFocus);

在需要使用的vue文件中（updated方法中）使用

///...
 updated() {
       this.$enterFocus('[focus]'); //'[focus]'为选择器，该值会传递给 document.querySelectorAll('[focus]')方法查询注册回车键盘事件的方法，根据实际情况修改
    },
//.../

3.3 非vue使用方法api-enterfocus.js文件

window.enterFocus('[focus]');