当点击失去对锚标签的关注时
when click lost focus on anchor tag
通过使用键盘 Tab 键并在锚点上按回车键,
图层启用显示。
问题是按下 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;}
请帮忙
在使用焦点时,我发现将它包裹在超时中效果最好,如下所示:
$('.basic').click(function (e) {
$('#basic-modal-content').modal();
settimeout(function(){
$('.basic').focus();
}, 100);
return false;
});
这种方法为浏览器提供了 'break' 来设置焦点。如果它不起作用,请尝试增加超时值。
这里,我做了focus:false。在此场景中,如果用户单击焦点 2。模型将弹出并且焦点将继续在其位置上,但如果用户单击任何下一个元素,它将失去焦点,因为用户已经为另一个 html 提供了另一个事件触发器.如果您不想松散焦点事件用户点击模式,您可能需要传递一些 class .
$('#basic-modal-content').modal(
{
focus:false
}
);
通过使用键盘 Tab 键并在锚点上按回车键, 图层启用显示。
问题是按下 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;}
请帮忙
在使用焦点时,我发现将它包裹在超时中效果最好,如下所示:
$('.basic').click(function (e) {
$('#basic-modal-content').modal();
settimeout(function(){
$('.basic').focus();
}, 100);
return false;
});
这种方法为浏览器提供了 'break' 来设置焦点。如果它不起作用,请尝试增加超时值。
这里,我做了focus:false。在此场景中,如果用户单击焦点 2。模型将弹出并且焦点将继续在其位置上,但如果用户单击任何下一个元素,它将失去焦点,因为用户已经为另一个 html 提供了另一个事件触发器.如果您不想松散焦点事件用户点击模式,您可能需要传递一些 class .
$('#basic-modal-content').modal(
{
focus:false
}
);