Question

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

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

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

Answer 1

要回答问题（如我们在评论中已经讨论过的），disabled elements can't be focused。

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

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

您可以将事件侦听器添加到keydown事件中，并像代码片段

中那样监听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键顺序（当 “标签”按钮用于导航）。

    <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>

选项卡禁用输入

5 个答案: