选项卡上禁用的输入 [英] Tab on disabled input

问题描述

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

I am implementing progressive UI disclosure pattern in my application. Using which I am disabling the next elements. So based on input of one element the next element is enabled.

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

But I have a problem is since the next element is disabled, the tab from the current element is taking the focus to the end of document or the tab header when tab out. As the progressive enables the element after the tab out, while this was happening the next element was not enabled so tab was lost outside the document.

因此，我的要求是在禁用的元素上以及在移动/平板电脑设备上启用选项卡，单击事件至少应在禁用的元素上进行注册.请让我知道您对此的看法.

So my requirement is to enable tab on the disabled elements and also on mobile/tablet devices the click events should at least be registered on the disabled elements. Please let me know your views on this.

推荐答案

答案

要回答问题(如我们在评论中已经讨论过的)，请

To answer the question (as we already discussed in the comments), disabled elements can't be focused.

解决方法

对于那些寻求一种能在视觉上指示元素被禁用"并且还阻止默认功能同时仍保留可聚焦性和单击事件的变通方法的人，以下是一个简化的示例，其中提交按钮似乎被禁用并被阻止除非输入中包含一些文本(如果清除输入，还将恢复禁用"状态).

For those looking for a workaround that gives a visual indication that an element is "disabled" and also prevents default functionality while still preserving focusability and click events, following is a simplified example where the submit button appears to be disabled and is prevented from "submitting" unless the input contains some text (also restores "disabled" state if input is cleared).

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>

这篇关于选项卡上禁用的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！