Question

我有一个只有一个可聚焦元素按钮的div（关闭按钮），当灯箱打开时焦点应该在div上。当我按下tab时，焦点应该转到＆＃39;关闭＆＃39;按钮。

根据自信技术（盲人用户），关闭按钮应该位于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上。

由于

Answer 1

div不能把重点放在afaik上。如果div有一个按钮，你可以改为呼叫

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

或者，如果我误解了div并且div是按钮可以将div更改为按钮或提交输入应该允许聚焦。

Answer 2

使用

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

这将滚动到元素，基本上是聚焦它。

最后，

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

我想这应该可行。

Answer 3

div不是一个可聚焦的元素。

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

然后可以在该按钮上设置aria-labelledby而不是整个div：）

如果有效，请告诉我。如果使用链接，请确保将href设置为＃。

您也可以添加一个按钮并隐藏它。不是display：none，而是使用z-index，因此它仍然是tabbable。

Answer 4

将您的jQuery更改为

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

<强>更新

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

这是功能齐全的工作演示

注意：按Tab键焦点切换到关闭按钮并出现红色边框

Answer 5

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

＆＃13;

var div = document.getElementById("test2");

div.addEventListener("focus", function(){alert("it's a test")});

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

Answer 6

我可以通过设置属性来修复：focusPopover：false，这解决了我的问题。

$（ '＃DIV-ID'）。lightbox_me（{ destroyOnClose：true， focusPopover：false， onLoad：function（）{ $（ '＃DIV ID'）专注（）。 } }）;

Answer 7

尝试使用HTML5 contenteditable

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

您可以尝试

position：fixed;

即使滚动，它也将始终位于同一位置，这是我的代码，它将始终位于屏幕中央。

   .example
{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
    width:800px;
    height:450px;
    background:#ffffff;
    z-index:51;
    padding:20px 10px 10px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 5px #444444;
    -webkit-box-shadow:0px 0px 5px #444444;
    box-shadow:0px 0px 5px #444444;
    display:none;
  }

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

8 个答案: