当点击丢失焦点在锚标签上时

Question

通过使用键盘选项卡并按下锚点上的输入，该图层可以显示。

问题是当按下Focus2锚点时焦点会丢失。

即使按下键盘输入“focus2”锚标记，我也想保持专注

这是我到目前为止所尝试的。

https://jsfiddle.net/0gfqtc4v/19/

<a href="#">focus1</a><br>  
<a href='#' class='basic'>focus2</a><br> 
<a href="#">focus3</a><br>
<a href="#">focus4</a><br>

<script
  src="https://code.jquery.com/jquery-1.7.2.min.js"
  integrity="sha256-R7aNzoy2gFrVs+pNJ6+SokH04ppcEqJ0yFLkNGoFALQ="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>

<script>
jQuery(function ($) { 

    $('.basic').click(function (e) {
        $('#basic-modal-content').modal();  
        $('.basic').focus();
        return false;
    });

});
</script>

:focus { outline:2px solid red;}
.basic { font-weight:bold; font-size:20px;}


#basic-modal-content {display:none;} 
/* Overlay */
#simplemodal-overlay {background-color:#000;} 
/* Container */
#simplemodal-container {height:260px; width:200px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/demos/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

请帮忙

Answer 1

在这里，我做了重点：假。在这个senerio中，如果用户点击焦点2.模型将弹出并且焦点将继续在它的位置，但如果用户点击任何下一个元素，它将失去它的焦点，因为用户已经为另一个html提供了另一个事件触发器。如果您不想松散焦点事件用户单击模态，您可能需要传递一些类。

$('#basic-modal-content').modal(
      {
                    focus:false
      }
    ); 

Answer 2

使用焦点时，如果它被包装在超时中，我会发现它最有效，如下所示：

$('.basic').click(function (e) {
        $('#basic-modal-content').modal();
        settimeout(function(){
            $('.basic').focus();
        }, 100);
        return false;
    });

这种方法为浏览器提供了“休息”来设置焦点。如果它不起作用，请尝试增加超时值。