javascript - 如何在点击时设置输入组内变量的状态？

Question

问题

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

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

数据源

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

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对最后触及的任何输入的关注。这不适用于生日输入组和地址输入组。

我假设formTracking设置focusfrom 0to的函数1不正确。

标签： javascriptarraysvue.js

Answer 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()函数中添加检查。