如何跟踪表单中的焦点元素答案

【问题标题】：How to keep track of focused elements in a form如何跟踪表单中的焦点元素
【发布时间】：2019-10-08 15:01:43
【问题描述】：

我是 vuejs 的新手，我想知道在表单中跟踪最新的焦点输入/文本区域以便以编程方式从父组件修改它们的值的最佳方法是什么。

示例

Form
  Input1
  Input2 -> focused
  Textarea
Button (onclick -> appends "hello" to the focused input)

【问题讨论】：

标签： javascript vue.js vuejs2 frontend

【解决方案1】：

答案：

您可以创建一个数据属性来跟踪当前关注/最后关注的input 元素。在下面的示例中，这称为 current_focus。

为此，您可以使用focus 事件 - 但由于focus 不会冒泡，您必须手动将其应用于每个单独的input 元素。

向父级提供focusin 事件处理程序更容易。与focus 不同，此事件将DOM 从任何子级冒泡到其父级。这允许您利用事件委托模式。

事件委托意味着您将一个处理程序应用于事件的父级，然后根据事件源执行某些操作。这意味着当我们收到focusin 事件时，我们可以简单地检查焦点元素是否为input 元素，然后更新我们的数据属性（current_focus）

代码沙盒示例：

https://codesandbox.io/s/focus-handler-vzip0

代码示例：

FocusDemo.js

<template>
  <div v-on:focusin="updateFocus">
    <input name="one">
    <br>
    <input name="two">
    <br>
    <input name="three">
    <br>
    <button @click="handleClick">Add Text To Focused</button>
  </div>
</template>

<script>
export default {
  name: "FocusDemo",
  data: function() {
    return {
      current_focus: undefined
    };
  },
  methods: {
    updateFocus: function(e) {
      let element = e.target;
      if (element.matches("input")) {
        this.current_focus = element;
      }
    },
    handleClick: function(e) {
      if (this.current_focus) {
        this.current_focus.value = "Button was clicked!";
      }
    }
  }
};
</script>

【讨论】：