最近开发热键功能，有所感悟。
从产品的角度思考，希望客户可以操作简单一点，通过上下左右方向键可以聚焦不同的元素，方便用户操作。
从技术的角度思考
- 问题1 键盘事件的监听
- 问题2 这个是一个全局的行为
- 问题3 我需要找到当前聚焦元素距离上 下 左 右最近的元素，并且聚焦。
首先问题1
因为键盘原生的左右是用来调整input 聚焦位置的，所以优先考虑组合件比如option+上。
github上找到mousetrap 键盘快捷键库。
问题2
全局行为的话，可以在main.ts里面注册。可以实现一个hooks。
问题3
这个也是最重要的。
逻辑: 触发键盘按钮找到所有的可以聚焦的元素，算出每个元素距离上 左的距离。拿到当前聚焦的元素。如果是左右键 直接在所有可以聚焦的list里面找到当前聚焦的元素，左键就是他的上一个，右键就是他的下一个。上下键的逻辑比较复杂，如果是上 ，需要找到距离聚焦元素最近的所有元素，如果只有一个直接聚焦，如果是多个，继续判断left，距离最近的所有元素每个元素的left - 聚焦元素的left取绝对值。取到最小值的下标，选中这个下标对应el元素即可。下也同理。只是判断的是 bottom 而已。
代码如下
import Mousetrap from "mousetrap";
import "@/utils/mousetrap/index";
type EleArr = {
el: HTMLElement;
top: number;
left: number;
};
const useHotKeys = async () => {
let eleArr: EleArr[] = [];
function setEleArr() {
eleArr = [];
let dom = document.body.classList.contains("el-popup-parent--hidden")
? Array.from(document.body.querySelectorAll("#app>.el-overlay")).at(-1)
: document.querySelector(".el-main");
if (!dom) {
return;
}
const focusableElements = dom.querySelectorAll("a[href], input, select, textarea");
focusableElements.forEach(element => {
const rect = element.getBoundingClientRect();
if (rect.top || rect.left) {
eleArr.push({
el: element as HTMLElement,
top: rect.top + window.scrollY + (element.classList.contains("el-select__input") ? -7 : 0),
left: rect.left + window.scrollX
});
}
});
}
function getFocusedEle() {
return document.activeElement as HTMLElement;
}
function operateKeys(type) {
if (!eleArr.length) {
return;
}
const el = getFocusedEle();
if (el) {
const eleIndex = eleArr.map(item => item.el).indexOf(el);
let activeEle = eleArr.at(eleIndex);
switch (type) {
case "left":
eleArr.at(eleIndex - 1)!.el.focus();
break;
case "right":
let index = eleIndex + 1 >= eleArr.length ? 0 : eleIndex + 1;
eleArr.at(index)!.el.focus();
break;
case "up":
if (activeEle) {
// 先找到在上它上面的所有元素
const underList = eleArr.filter(item => item.top < activeEle!.top);
if (underList.length) {
let mapTop = underList.map(item => item.top);
let maxTopItem = underList[mapTop.indexOf(Math.max(...mapTop))];
const recentlyEleList = eleArr.filter(item => item.top == maxTopItem!.top);
if (recentlyEleList.length == 1) {
recentlyEleList[0].el.focus();
break;
}
const numList = recentlyEleList.map(item => {
return Math.abs(item.left - activeEle!.left);
});
const minIndex = numList.indexOf(Math.min(...numList));
if (minIndex != -1) {
recentlyEleList[minIndex].el.focus();
}
}
}
break;
case "down":
if (activeEle) {
// 先找到在它下面的所有元素
const underList = eleArr.filter(item => item.top > activeEle!.top);
if (underList.length) {
const recentlyEleList = eleArr.filter(item => item.top == underList.at(0)!.top);
if (recentlyEleList.length == 1) {
recentlyEleList[0].el.focus();
break;
}
const numList = recentlyEleList.map(item => {
return Math.abs(item.left - activeEle!.left);
});
const minIndex = numList.indexOf(Math.min(...numList));
if (minIndex != -1) {
recentlyEleList[minIndex].el.focus();
}
}
}
break;
default:
console.warn("无效的指令");
break;
}
// let elLeft = el.getBoundingClientRect().left + window.scrollX;
// let elTop = el.getBoundingClientRect().top + window.scrollX;
} else {
if (eleArr.length) {
eleArr[0].el.focus();
}
}
}
const toNext = () => {
setEleArr();
operateKeys("down");
};
const toPrev = () => {
setEleArr();
operateKeys("up");
};
const toLeft = () => {
setEleArr();
operateKeys("left");
};
const toRight = () => {
setEleArr();
console.log(eleArr);
operateKeys("right");
};
return { toNext, toPrev, toLeft, toRight };
};
// 添加键盘事件
export const addKeyBoard = async () => {
const { toLeft, toRight, toNext, toPrev } = await useHotKeys();
Mousetrap.bindGlobal("option+up", () => {
toPrev();
return false;
});
Mousetrap.bindGlobal("option+down", () => {
toNext();
return false;
});
Mousetrap.bindGlobal("option+left", () => {
toLeft();
return false;
});
Mousetrap.bindGlobal("option+right", () => {
toRight();
return false;
});
};
以上js在main.ts 里面引入addKeyBoard方法调用即可
解释
因为还有弹框所以判断了
let dom = document.body.classList.contains("el-popup-parent--hidden")
? Array.from(document.body.querySelectorAll("#app>.el-overlay")).at(-1)
: document.querySelector(".el-main");
因为mousetrap在input里面实现键盘事件，需要安装插件。可以在官网找到。
import Mousetrap from "mousetrap";
import "@/utils/mousetrap/index";
// @/utils/mousetrap/index 内容
(function (a) {
let c = {},
d = a.prototype.stopCallback;
a.prototype.stopCallback = function (e, b, a, f) {
return this.paused ? !0 : c[a] || c[f] ? !1 : d.call(this, e, b, a);
};
a.prototype.bindGlobal = function (a, b, d) {
this.bind(a, b, d);
if (a instanceof Array) for (b = 0; b < a.length; b++) c[a[b]] = !0;
else c[a] = !0;
};
a.init();
})(Mousetrap);
