我正在我的应用程序中实施渐进式UI披露模式。使用此模式,我正在禁用下一个元素。因此,根据一个元素的输入,下一个元素将被启用。
但是,我的问题是由于下一个元素被禁用了,从当前元素开始的标签会在到达文档结尾或标签头时丢失焦点。由于渐进式使元素在标签后面启用,所以在这种情况下,下一个元素尚未启用,因此标签已经丢失在文档外部。
因此,我的要求是在禁用的元素上启用标签,并且在移动/平板设备上,单击事件应至少在禁用的元素上注册。请让我知道您对此的看法。
我正在我的应用程序中实施渐进式UI披露模式。使用此模式,我正在禁用下一个元素。因此,根据一个元素的输入,下一个元素将被启用。
但是,我的问题是由于下一个元素被禁用了,从当前元素开始的标签会在到达文档结尾或标签头时丢失焦点。由于渐进式使元素在标签后面启用,所以在这种情况下,下一个元素尚未启用,因此标签已经丢失在文档外部。
因此,我的要求是在禁用的元素上启用标签,并且在移动/平板设备上,单击事件应至少在禁用的元素上注册。请让我知道您对此的看法。
回答
为了回答这个问题(正如我们在评论中已经讨论过的),禁用的元素不能被聚焦。
解决方法
对于那些寻找解决办法的人,以下是一个简化的示例,其中提交按钮看起来是禁用的,并且除非输入包含一些文本(还原“禁用”状态如果输入被清除),否则将防止默认功能,同时仍然保留可聚焦性和单击事件。
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
类来提高可访问性。 - crenshaw-dev您可以添加一个事件监听器到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">
当您在该元素上按Tab键时,它将被启用。否则不会影响正常行为。我假设您不想在焦点离开后重新禁用该元素。
根据我的想法,对于下拉框和输入框来说,一个输入事件监听器或更改事件监听器会更适合您的情况。例如:
$(document).on('input','input',function()
{
$(this).next().prop('disabled',false);
}
或者
$(document).on('change','input',function()
{
$(this).next().prop('disabled',false);
}
在这种情况下,您可以使用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>
如果我们有一些代码的话,就更好理解你的问题了。
为此:
我正在应用渐进式UI披露模式。使用该模式,我会禁用下一个元素。因此,基于一个元素的输入,下一个元素将被启用。
您必须先处理第一个元素的事件,然后在回调函数中需要启用/禁用第二个元素,例如:
启用:
$('#firstElement).on('click', function(){
$('#secondElement').removeAttr('disabled')
})
禁用:
$('#firstElement).on('click', function(){
$('#secondElement').attr('disabled', 'disabled')
})
希望这能帮到您。