如何在lightbox_me触发时将焦点设置在DIV上？

我有一个div只有一个可调焦的元素按钮（关闭按钮），当灯箱打开焦点应该在div上。当我按标签焦点应该转到'关闭'按钮。如何在lightbox_me触发时将焦点设置在DIV上？

根据断言技术（盲用户）关闭按钮应该在DOM的底部，这是DIV应该在灯箱触发时应该关注的原因之一。

我已经设置

<div id="div-id" role="dialog" tabindex="-1" aria-labelledby="operations-help">

和jQuery的设置：

$('#div-id').lightbox_me({ 
    destroyOnClose: true, 
    onLoad: function() { 
     $('#div-id').focus(); 
    } 
});

，但重点是只有关闭按钮的设置，有没有什么办法可以在DIV设置焦点。

谢谢

来源

2016-04-14 Archana Reddy

尝试它，你可以尝试tabindex属性设置为DIC，使其可成为焦点...的jQuery（ “div.selector”）。ATTR（“tabindex属性”，-1）.focus（）; – RRR

请检查https://jsfiddle.net/fmatmzdb/，其中演示了如何将焦点设置为div – RRR

请检查此https://jsfiddle.net/fmatmzdb/1/ ...动态设置div tabindex并同时设置关闭按钮tabindex 1高于div – RRR

一个div不能聚焦afaik。如果div有一个按钮，你可以改为调用

$('#div-id button').focus();

或者，如果我误解和DIV是按钮就可以改变div来一个按钮或输入提交应该允许聚焦。

来源

2016-04-14 11:18:30 Brian

嗨布赖恩感谢您的快速响应，但div有一个关闭按钮，根据要求，它不应该默认为重点。 –

在我的研究中，我开始知道如果我们将tabindex =“ - 1”添加到DIV中，它会变得非常糟糕，但它不会发生。 –

哦，对不起，我误解了那部分 - 我不认为一个div通常是可以聚焦的 - 通常只有带有tabindex的元素才会关注 - 我想知道是否在div上设置了正值tabindex，然后调用.focus（）元素将工作。在常规浏览器中进行测试并不确定它是否可以与屏幕阅读器一起使用，但这是我一分钟得到的最好主意。 – Brian

使用

window.location.hash = '#div-id';

这将滚动的元素，基本上是注重它。

所以最后，

$('#div-id').lightbox_me({ 
    destroyOnClose: true, 
    onLoad: function() { 
     window.location.hash = '#div-id'; 
    } 
});

我想这应该工作。

来源

2016-04-14 11:22:50

嗨Shubhan，我已经尝试了上述..但没有运气，上面的代码行为是相同的onLoad：function（）{（＃＃div-id'）。焦点（）; } –

好吧，让我们搜索另一种方式然后，我会尽快更新帖子 –

问题是当我把调试点放在window.location.hash ='＃div-id'，焦点在对话框，一旦控制出现onLoad焦点，立即关闭按钮。 –

div不是一个可重点的元素。

一个可能的解决方案是在div的角落某处设置一个尺寸为1px×1px的按钮/链接，并将焦点设置在其上。

唱段，labelledby能登上那个按钮，而不是整个DIV :)

不要让我知道是否可行进行再设置。如果使用链接，请确保将href设置为＃。

你也可以添加一个按钮并隐藏它。不与显示：无，但与Z - 索引，以便它仍然tabbable。

来源

2016-04-14 11:26:49

改变你的jQuery来

$('#div-id').lightbox_me({ 
    destroyOnClose: true, 
    onLoad: function() { 
     $('#div-id').attr('tabindex', 1).focus(); 
     $('.close').attr('tabindex',2); 
    } 
});

UPDATE

$('#div-id').lightbox_me({ 
    destroyOnClose: true, 
    centered: true, 
    onLoad: function() { 
     $('#div-id').find('a:first').parent().focus() 
     } 
    });

这里是全功能的工作演示https://jsfiddle.net/jfy5n2nf/1/

注：在按下tab键焦点转移到关闭按钮并出现红色边框

来源

2016-04-14 11:43:16 RRR

你检查过了吗？ – RRR

你好，上面的代码片段焦点仍然要关闭按钮 –

嗯，你使用什么插件灯箱？ – RRR

嘿，你不能集中div元素，但你可以做一些工作，并放在这个div元素之后或里面，你可以。下面是例子：

var div = document.getElementById("test2"); 
 

 
div.addEventListener("focus", function(){alert("it's a test")});

#test{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color:#0CF; 
 
    z-index:1; 
 
    } 
 
#test2{ 
 
    position:absolute; 
 
    z-index:0; 
 
    width:100; 
 
    height:100%; 
 
    opacity:0; 
 
    cursor:default; 
 
    }

<div id="test"><textarea id="test2"></textarea>sdfsdf</div>

来源

2016-04-14 11:44:50 Jasiu

我能够通过设置属性来解决：focusPopover：假的，这解决了我的问题。

$（ '＃DIV ID'）lightbox_me（{ destroyOnClose：真实， focusPopover：假的，的onLoad：功能（）{ $（ '＃DIV ID'）专注（）; } }）;

来源

2016-04-15 06:51:27

与HTML5 contenteditable

$('#focusbtn').click(function(){ 
 
    $('#div-id').focus(); 
 
}); 
 

 
$('#div-id').on('focus', function(){ 
 
    alert('I am focusing in div!'); 
 
}); 
 

 
$('#div-id').keypress(function(e){ 
 

 
    e.preventDefault(); 
 

 
});

#div-id{ 
 
    pointer-events: none; 
 
    cursor: default; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div-id" role="dialog" contenteditable="true"> 
 
    I am the div. Please focus on me 
 
</div> 
 

 
<BR/> 
 

 
<button id="focusbtn">Focus</button>

来源

2016-04-15 06:59:50 rmondesilva

如何在lightbox_me触发时将焦点设置在DIV上？

回答

相关问题