在Vue中实现回车键切换焦点

简介: 在Vue中实现回车键切换焦点

几乎在所有浏览器中,都具有 Tab 键切换焦点的功能。

但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能。

为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求。

在上一代人中,大多都有这种操作习惯。习惯把保存称为编辑,习惯用回车替换 Tab。这是受到微软 excel 荼毒的结果。

起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题。

可困难马上就出现了,我发现这条路是走不通的。

我们经常可以主动触发某个事件,比如el.click()就可以调用点击事件,或者使用dispatchEvent。但是键盘和鼠标事件却不行。

我查阅了很多资料,也做了很多尝试。最后总结出来一个结论,在浏览器中,JavaScript 无法操作用户的键盘或者鼠标,这是出于安全策略的考虑。仔细想一下,如果可以用一段 JavaScript 脚本控制用户键盘和鼠标的话,那么用户只需要打开一个黑客网站,黑客就可以瞬间得到他想得到的一切。

所以,如果要通过除 Tab 键以外的其他方式来触发焦点切换,focus几乎是唯一的选择。


在原生页面中实现回车键切换焦点


项目是基于 vue 和 element-ui 做的,为了把实现思路先讲清楚,暂时把这些抛开,从原生的页面中寻找答案。

以下是一个原生的 html 页面。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
  </head>
  <body>
    <form>
      <input placeholder="姓名" />
      <input placeholder="性别" />
      <input placeholder="年龄" />
    </form>
  </body>
</html>

接下来要实现通过回车键切换焦点,我把思路梳理如下:

  1. 监听回车键按下事件。
  2. 获取当前聚焦元素。
  3. 获取下一个要被聚焦的元素。
  4. 切换焦点。

思路有了,实现起来也非常简单。


1.监听回车键按下事件


在文档中添加 script 标签,写入如下代码。


function enterCallback(e) {
  if (e.keyCode === 13) {
    // 按下回车后的逻辑
  }
}
window.addEventListener("keydown", enterCallback);

要注意,enterCallback单独拿出来,用于注销监听事件。

监听按键事件最常用的方法就是使用事件委托,将事件绑定到window对象上。相比较给每一个元素都绑定一个事件的方式,这样做的最大好处就是节省内存空间,性能更好。

判断按下哪个键的方式有很多,比如判断e.keye.code或者e.keyCode等方式。但绝大多数的情况下都建议使用e.keyCode。下面是一张来自网络的keyCode表。


2.获取当前聚焦元素


很容易就可以做到这一步。

常见的有两种方式。第一种是e.target,第二种是document.activeElement。这种情况下,个人更推荐使用第二种。


function enterCallback(e) {
  if (e.keyCode === 13) {
    let activeEl = document.activeElement;
  }
}


3.获取下一个要被聚焦的元素


这一步也比较容易。使用el.nextElementSiblingAPI 即可获取。


function enterCallback(e) {
  if (e.keyCode === 13) {
    let activeEl = document.activeElement;
    let nextEl = activeEl.nextElementSibling;
  }
}


4.切换焦点


切换焦点调用focus即可实现。


function enterCallback(e) {
  if (e.keyCode === 13) {
    let activeEl = document.activeElement;
    let nextEl = activeEl.nextElementSibling;
    nextEl && nextEl.focus();
  }
}

至此一个最简单的 Demo 已经实现了,接下来看看项目中实际的情况。


在 element-ui 项目中实现回车键切换焦点


因为是使用组件开发,加上样式等因素,dom 节点并不像上面写的原生 Demo 那么简单,实际情况是多层嵌套的。下面是实际生成的代码结构。


<div
  class="el-form-item el-form-item--small"
  style="margin-bottom: 0vh; width: 25%; display: inline-block;"
>
  <label for="pactcode" class="el-form-item__label" style="width: 130px;"
    >协议号</label
  >
  <div class="el-form-item__content" style="margin-left: 130px;">
    <div class="el-input el-input--small">
      <!---->
      <input
        type="text"
        autocomplete="off"
        id="el-input"
        placeholder="未填写协议号"
        class="el-input__inner"
      />
      <!---->
    </div>
  </div>
</div>

可以看到,如果每一个输入框都是这种类型的嵌套结构,上面的方法是无法直接解决的。因为nextElementSiblingAPI 只能找到下一个兄弟元素,而在这里 input 明显找不到下一个兄弟元素。

思路是,通过回溯的手段朝外层寻找,直到找到一个类名包含el-form-itemel-form-item--small的祖级元素,然后再从这个祖级元素的下一个兄弟元素中寻找类名包含el-input__inner的 input 元素。

所以要再写两个函数,分别是寻找祖级元素的findFormItem和寻找 input 元素的findInput

findFormItem:


function findFormItem(el) {
  const parent = el.parentElement;
  if (!parent) return document.body;
  if (
    parent.className.includes("el-form-item") &&
    parent.className.includes("el-form-item--small")
  ) {
    return parent;
  }
  return findFormItem(parent);
}

findInput:


function findInput(container) {
  let nextEl = container.nextElementSibling;
  if (!nextEl) return;
  let input = nextEl.querySelector("input");
  while (input.id === "el-select") {
    nextEl = nextEl.nextElementSibling;
    if (!nextEl) return;
    input = nextEl.querySelector("input");
  }
  if (input.className.includes("el-input__inner")) return input;
}

有了这两个函数以后,实现回车切换焦点就非常简单了。只需要执行两行代码。


const container = findFormItem(document.activeElement);
findInput(container) && findInput(container).focus();

完整的代码大概是这样的。

methods中声明三个方法。


methods: {
    addEnterListener() {
      if (window.__completeEnterBind__) return;
      window.addEventListener("keydown", this.enterCallback);
      window.__completeEnterBind__ = true;
    },
    removeEnterListener() {
      window.removeEventListener("keydown", this.enterCallback);
      window.__completeEnterBind__ = false;
    },
    enterCallback(e) {
      function findFormItem(el) {
        const parent = el.parentElement;
        if (!parent) return document.body;
        if (
          parent.className.includes("el-form-item") &&
          parent.className.includes("el-form-item--small")
        ) {
          return parent;
        }
        return findFormItem(parent);
      }
      function findInput(container) {
        let nextEl = container.nextElementSibling;
        if (!nextEl) return;
        let input = nextEl.querySelector("input");
        while (input.id === "el-select") {
          nextEl = nextEl.nextElementSibling;
          if (!nextEl) return;
          input = nextEl.querySelector("input");
        }
        if (input.className.includes("el-input__inner")) return input;
      }
      if (e.keyCode === 13) {
        const container = findFormItem(document.activeElement);
        findInput(container) && findInput(container).focus();
      }
    }
}

然后在mounted中添加回车监听和在destroy中移除回车键听。


mounted() {
  this.addEnterListener();
},
destroy() {
  this.removeEnterListener();
},

需要注意的是,项目是多标签页的形式,表单组件可能会被渲染多次,所以通过在 window 对象上添加一个__completeEnterBind__字段来确保回车换行事件正确绑定。

这样,又完成了一次用户的特殊需求,距离拿到项目款项又近了一步。


相关文章
|
3天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
27 7
|
3天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
15 1
|
2天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
29 18
|
1天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
14 7
|
1天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
14 6
|
1天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
11 6
|
1天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`&lt;li v-for=&quot;item in items&quot; @click=&quot;handleClick(item)&quot;&gt;{{ item }}&lt;/li&gt;`。
|
3天前
|
JavaScript 索引
如何在 Vue 中动态地添加或删除 Mixin
【10月更文挑战第18天】通过以上的分析和探讨,相信你对如何在 Vue 中动态地添加或删除 Mixin 有了更深入的理解。在实际开发中,你可以根据具体的需求和场景,灵活运用这些方法,以实现更加灵活和高效的应用开发。
11 4
|
2天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
15 2
|
3天前
|
JavaScript
Vue 中mixin 的用法
【10月更文挑战第18天】Vue 中mixin 的用法
14 3