javascript - 禁用输入选项卡

Question

我正在我的应用程序中实现渐进式 UI 公开模式。我正在使用它禁用下一个元素。因此，基于一个元素的输入，启用下一个元素。

但我有一个问题，因为下一个元素被禁用，当前元素的选项卡将焦点带到文档末尾或选项卡出时的选项卡标题。由于渐进式在制表符退出后启用元素，而发生这种情况时未启用下一个元素，因此制表符在文档外丢失。

所以我的要求是在禁用元素上启用选项卡，并且在移动/平板设备上，点击事件至少应该在禁用元素上注册。请让我知道您对此的看法。

Answer 1

回答

要回答这个问题(正如我们已经在评论中讨论过的)，disabled elements can't be focused .

解决方法

对于那些正在寻找一种变通方法的人来说，这种变通方法可以提供一个元素被“禁用”的视觉指示，并且还可以防止默认功能，同时仍然保留可聚焦性和点击事件，下面是一个简化的示例，其中提交按钮似乎被禁用并被阻止从“提交”除非输入包含一些文本(如果输入被清除也会恢复“禁用”状态)。

const input = document.querySelector('input');
const button = document.querySelector('button');
input.addEventListener('input', (event) => {
  const target = event.currentTarget;
  const next = target.nextElementSibling;
  if (target.value) {
    next.classList.remove('disabled');
  } else {
    next.classList.add('disabled');
  }
});

button.addEventListener('click', (event) => {
  const target = event.currentTarget;
  if (target.classList.contains('disabled')) {
    event.preventDefault();
    console.log('not submitted');
  } else {
    console.log('submitted');
  }
});

button {
  background-color: #fff;
  color: #0d47a1;
  border: 2px solid #0d47a1;
}

button.disabled {
  background-color: #e0e0e0;
  color: #bdbdbd;
  border: 2px solid #bdbdbd;
  cursor: default;
}
    
button.disabled:focus {
  outline: none;
}

<input type="text">
<button class="disabled">Submit</button>