javascript - 如何跟踪表单中的焦点元素

Question

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

示例

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

Answer 1

答案:

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

要执行此操作，您可以使用 focus 事件 - 但由于 focus 不会冒泡，因此您必须将其应用于每个人手动输入元素。

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

事件委托(delegate)意味着您将一个处理程序应用于事件的父级，然后根据事件源执行某些操作。这意味着当我们收到 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>