禁用输入选项卡

Question

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

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

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

Answer 1

回答

要回答这个问题（我们已经在 cmets 中讨论过），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>

Answer 2

您可以向 keydown 事件添加事件监听器，并像在代码 sn-p 中那样监听 tab 键，

document.addEventListener("keydown", keyDown);

function keyDown(e) {
  switch (e.which) {
    case 9:
      var focused = $(document.activeElement);
      var all_inputs = $("input");
      var disabled_inputs = $("input[disabled='disabled']");
      var diff = all_inputs.length - disabled_inputs.length;
      var index = all_inputs.index(focused);
      if (index == diff - 1 && index != -1 && disabled_inputs.length > 0) {
        $(disabled_inputs[0]).removeAttr("disabled").focus();
        e.preventDefault();
      }
      break;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" placeholder="this is not disabled!"> <br>
<input type="password" placeholder="this is not either!"> <br>
<input type="button" value="This is!" disabled="disabled"> <br>
<input type="submit" value="This is too!" disabled="disabled">

这将在您点击该元素时启用该元素。否则不会影响正常行为。我假设您不想在焦点离开后重新禁用该元素。

Answer 3

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

为此：

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

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

启用：

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

禁用：

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

希望这会有所帮助。

Answer 4

根据我的想法，输入事件侦听器或更改下拉列表和输入字段的事件侦听器更适合您的情况。 例如：

$(document).on('input','input',function()
{
  $(this).next().prop('disabled',false);
}

或

$(document).on('change','input',function()
{
  $(this).next().prop('disabled',false);
}

Answer 5

在这种情况下，您可以使用tabindex 属性。请参考下面的代码，您需要更新禁用元素的 tabindex，使其在按 tab 时被跳过。

根据 w3schools

tabindex 属性指定元素的 tab 顺序（当 “tab”按钮用于导航）。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <input class="input-1" tabindex="1" value="1">
    <input class="input-2" tabindex="2" value="2">
    <input type="button" onclick="changeTabIndex();" value="change-tab-index">
    <input class="input-3" tabindex="3" value="3">
    <input class="input-4" tabindex="4" value="4">
    <input class="input-5" tabindex="5" value="5">
    <script type="text/javascript">
    	function changeTabIndex() {
    		$(".input-5").attr("tabindex",4);
    		$(".input-4").attr("tabindex",5);
    	}
    </script>