при клике потерял фокус на теге привязки - PullRequest
Новая
       16

при клике потерял фокус на теге привязки

0 голосов
/ 06 сентября 2018

С помощью вкладок клавиатуры и нажмите Enter на привязке, слой, позволяющий показать.

Проблема в том, что фокус теряется при нажатии на якорь 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;}

Пожалуйста, помогите

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Здесь я сделал фокус: ложь.В этом случае, если пользователь нажмет на фокус 2. Модель всплывет, и фокус продолжит свою позицию, но если пользователь щелкнет по любому следующему элементу, он потеряет фокус, потому что пользователь дал другой триггер события для другого html.Если вы не хотите терять фокусировку, пользователь нажимает на модал, возможно, вам нужно передать какой-то класс. 

$('#basic-modal-content').modal(
      {
                    focus:false
      }
    );
0 голосов
/ 06 сентября 2018

При работе с фокусом, я считаю, что он работает лучше всего, если он заключен в тайм-аут, например: 

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

Этот подход дает браузеру «перерыв» для установки фокуса. Если это не работает, попробуйте увеличить значение тайм-аута.

...