选项卡禁用输入

Question

我正在我的应用程序中实现渐进式UI披露模式.使用它我禁用下一个元素.因此,基于一个元素的输入,启用下一个元素.

但我有一个问题是,由于下一个元素被禁用,当前元素的选项卡将焦点放在文档的末尾或标签输出时的标题页.由于渐进式选项卡在选项卡输出后启用,所以当发生这种情况时,未启用下一个元素,因此选项卡在文档外部丢失.

因此,我的要求是在已禁用的元素以及移动/平板电脑设备上启用标签,至少应在已禁用的元素上注册点击事件.请告诉我你对此的看法.

Answer 1

回答

要回答这个问题（如我们在评论中已经讨论过的），不能将禁用元素作为焦点。

解决方法

对于那些正在寻找一种变通办法的人，该变通办法可以直观地表明某个元素已“禁用”，并且在仍保留可聚焦性和单击事件的同时阻止了默认功能，下面是一个简化的示例，其中提交按钮似乎被禁用并且被阻止“提交” ”，除非输入包含一些文本（如果清除输入，还将恢复“禁用”状态）。

const input = document.querySelector('input');
const button = document.querySelector('button');

input.addEventListener('input', function(event) {
  let next = this.nextElementSibling;
  if (this.value) {
    next.classList.remove('disabled');
  } else {
    next.classList.add('disabled');
  }
});

button.addEventListener('click', function(event) {
  if (this.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>

Answer 2

如果我们有部分代码可以更好地理解您的问题，那就更好了。

为了这：

我正在我的应用程序中实现渐进式 UI 披露模式。我使用它来禁用下一个元素。因此，根据一个元素的输入，启用下一个元素。

您必须首先处理第一个元素的事件，然后在回调函数中您需要启用/禁用第二个元素，比方说：

对于启用：

$('#firstElement).on('click', function(){ $('#secondElement').removeAttr('disabled') })

对于禁用：

$('#firstElement).on('click', function(){ $('#secondElement').attr('disabled', 'disabled') })

希望这能有所帮助。