禁用输入选项卡

Posted 2023-05-09

【中文标题】禁用输入选项卡

【英文标题】：Tab on disabled input

【发布时间】：2014-12-10 11:36:39

【问题描述】：

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

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

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

【问题讨论】：

你有示例代码吗？

@mac9416 Disabled elements cannot be focused.

@benv 我喜欢这样。也许只是设置按钮看起来禁用。

@mac9416 是的，似乎比覆盖禁用元素的焦点行为更容易。祝你好运。

请添加示例代码。

【参考方案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>

【讨论】：

我喜欢。这大概就是我要走的路线。只有修改，我可能会添加 aria-disabled="true" 以及 disabled 类以提高可访问性。

【参考方案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">

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

【讨论】：

感谢代码！不幸的是，我希望有一个解决方案，除了焦点能力之外，还能保留按钮“禁用”的所有其他方面。

那么我想你可以跳过关于删除 disabled 属性的部分。我现在无法测试它，因为我现在不在电脑旁。但是，它仍然应该集中。如果这不起作用，请尝试手动模拟它（即附加事件侦听器，然后执行默认百分比，并使用 css 来模拟阴影（我猜你可能已经覆盖了原生样式。）但是，我不推荐它。

顺便说一句，如果你希望它只专注于视图将在那里滚动，那么就让它保持原样并设置滚动，虽然我不是 UI 专家，我认为这个只要您阻止默认设置，它将实现最终用户看到的相同效果，以便它不会在其他地方滚动。

不幸的是，删除 disabled 属性是prerequisite to focusing (test)。我正在考虑“样式化但实际上未禁用”的路线。手动设置滚动似乎比样式诡计更具侵入性。

可能就是这样。通常，无论如何，没有人可以在浏览器输入字段中键入常规选项卡。另外，我的意思是下一个可聚焦元素，但如果这是你想要实现的，那么防止默认就足够了

【参考方案3】：

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

为此：

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

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

启用：

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

禁用：

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

希望这会有所帮助。

【参考方案4】：

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

$(document).on('input','input',function()

  $(this).next().prop('disabled',false);

或

$(document).on('change','input',function()

  $(this).next().prop('disabled',false);

【参考方案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>