【问题标题】：How to set state of variable within input group on click?如何在点击时设置输入组内变量的状态？
【发布时间】：2019-04-12 09:04:44
【问题描述】：

问题

我想为变量 focus 设置一个数字，用于标记最后一次触摸的输入字段（0 为 false，1 为 true）。

目前这适用于单个输入字段，但不适用于我的 Vue.js 视图中的输入组。

数据来源

在这里，您可以在 Chrome 检查器的控制台中看到带有 focus 变量的数组：

tracking Event [{…}]
 0:
  formData: Array(15)
   0: {name: "selectedProcess", value: "example", focus: 0, type: "radio"}
   1: {name: "gender", value: "F", focus: 0, type: "radio"}
   2: {name: "firstname", value: "empty", focus: 0, type: "input"}
   3: {name: "lastname", value: "filled_out", focus: 1, type: "input"}
   4: {name: "birthday", value: "empty", focus: 0, type: "input"}
   5: {name: "street", value: "empty", focus: 0, type: "input"}
   6: {name: "streetNo", value: "empty", focus: 0, type: "input"}
   7: {name: "zip", value: "empty", focus: 0, type: "input"}
   8: {name: "city", value: "empty", focus: 0, type: "input"}
   9: {name: "countryKey", value: "de", focus: 0, type: "select"}
   10: {name: "email", value: "empty", focus: 0, type: "input"}
   11: {name: "actioncode", value: "empty", focus: 0, type: "input"}
   12: {name: "selectedCard", value: "empty", focus: 0, type: "radio"}
   13: {name: "allowDataUsage", value: "unchecked", focus: 0, type: "checkbox"}
   14: {name: "cardNumber", value: "empty", focus: 0, type: "input"}
   length: 15
  __proto__: Array(0)
  __proto__: Object
length: 1
__proto__: Array(0)

如您所见：数组项 [3] lastname 最后被触摸，其焦点成功注册为1。

此行为不适用于注册表表单上的所有输入字段。

某些输入（如lastname）是单个输入字段。其他诸如 street、zip、... 和birthday、birthmonths 等都在输入组组件中。

示例：生日组组件包含日、月和生日的输入。

焦点的实现

目前，我已经实现了像这样使用焦点：

function formatTracking(data) {
  let { name, value, focus, type, isSensible } = data;

  if (isBrowser) {
    let currentElements = document.querySelector(`input[data-identity="${name}"]`);

    if (!currentElements) {
      currentElements = Array.from(document.querySelectorAll(`[data-identity="${name}"] input`));
    } else {
      currentElements = [currentElements];
    }

    focus = 0;
    for (let index in currentElements) {
      focus = currentElements[index] === document.activeElement ? 1 : 0;

      if (focus) {
        break;
      }
    }
  }

...

}

表单如何推送到数据层（数组）

const trackingData = [
    {
      name: 'selectedProcess',
      value: selectedProcess ? selectedProcess.value : null,
      type: 'radio'
    },
    { name: 'gender', value: account.genderKey, type: 'radio' },
    {
      name: 'firstname',
      value: account.firstName,
      type: 'input',
      isSensible: true
    },
    {
      name: 'lastname',
      value: account.lastName,
      type: 'input',
      isSensible: true
    },
    {
      name: 'birthday',
      value: hasInterface(account.birthday, {
        day: isValidString,
        month: isValidString,
        year: isValidString
      })
        ? account.birthday
        : null,
      type: 'input',
      isSensible: true
    },
    {
      name: 'street',
      value: account.address.street,
      type: 'input',
      isSensible: true
    },
    {
      name: 'streetNo',
      value: account.address.streetNo,
      type: 'input',
      isSensible: true
    },

...
]

我希望看到焦点 1 放在最后触摸的任何输入上。这不适用于生日输入组和地址输入组。

我假设将focus 从0 设置为1 的函数formTracking 不正确。

【问题讨论】：

formatTracking(data)是怎么调用的？
在文档上使用focus/blur 事件跟踪 activeElement 并将最后一个活动项记录在变量中是一个可行的选择吗？
@A1rPun：是的，当然，这将是一个可行的选择。

标签： javascript arrays vue.js

【解决方案1】：

您可以这样做来跟踪活动元素。

function updateActiveElement() {
  const currentActiveElement = document.activeElement;
  if (lastActiveElement !== currentActiveElement)
    lastActiveElement = currentActiveElement;
}

let lastActiveElement = document.activeElement;
window.addEventListener('focus', updateActiveElement);
window.addEventListener('blur', updateActiveElement);

当您需要最后一个活动元素时，只需检查 lastActiveElement 变量。

如果您只想跟踪输入，可以在 updateActiveElement() 函数中添加检查。

【讨论】：