layer 弹出之后的页面焦点调整

This commit is contained in:
sunxiaobin89 2022-07-16 02:10:18 +08:00
parent 46621b1f6e
commit f955a75d65
2 changed files with 41 additions and 6 deletions

View File

@ -20,6 +20,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
.layui-layer-dialog .layui-layer-ico, .layui-layer-dialog .layui-layer-ico,
.layui-layer-setwin a, .layui-layer-setwin a,
.layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} .layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-btn a:focus {border-style: dashed;border-color: rgba(46, 45, 60, 0.84);}
.layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;} .layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;}
.layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;} .layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;}

View File

@ -133,7 +133,8 @@ var layer = {
if(type) yes = options; if(type) yes = options;
return layer.open($.extend({ return layer.open($.extend({
content: content, content: content,
yes: yes yes: yes,
autofocus: true
}, type ? {} : options)); }, type ? {} : options));
}, },
@ -146,6 +147,7 @@ var layer = {
return layer.open($.extend({ return layer.open($.extend({
content: content, content: content,
btn: ready.btn, btn: ready.btn,
autofocus: true,
yes: yes, yes: yes,
btn2: cancel btn2: cancel
}, type ? {} : options)); }, type ? {} : options));
@ -164,6 +166,7 @@ var layer = {
title: false, title: false,
closeBtn: false, closeBtn: false,
btn: false, btn: false,
autofocus: false,
resize: false, resize: false,
end: end end: end
}, (type && !ready.config.skin) ? { }, (type && !ready.config.skin) ? {
@ -179,11 +182,16 @@ var layer = {
}, },
load: function(icon, options){ load: function(icon, options){
var activeElem = document.activeElement; // 记录弹出时的焦点
return layer.open($.extend({ return layer.open($.extend({
type: 3, type: 3,
icon: icon || 0, icon: icon || 0,
resize: false, resize: false,
shade: 0.01 shade: 0.01,
autofocus: true, // 加载的时候去掉原来的焦点
end: function () {
activeElem.focus(); // 恢复加载前的焦点
}
}, options)); }, options));
}, },
@ -192,6 +200,7 @@ var layer = {
type: 4, type: 4,
content: [content, follow], content: [content, follow],
closeBtn: false, closeBtn: false,
autofocus: false,
time: 3000, time: 3000,
shade: false, shade: false,
resize: false, resize: false,
@ -667,6 +676,29 @@ Class.pt.move = function(){
Class.pt.callback = function(){ Class.pt.callback = function(){
var that = this, layero = that.layero, config = that.config; var that = this, layero = that.layero, config = that.config;
that.openLayer(); that.openLayer();
var btnElem = layero.find('.'+ doms[6]).children('a');
// 根据autofocus设置默认聚焦的按钮
var autofocus = config.autofocus;
if (autofocus) {
document.activeElement.blur();
btnElem.attr('href', 'javascript:;');
var btnFocus;
if (layui.type(autofocus) === 'string') {
var btnNum = parseInt(autofocus.substr(3)) || 1;
btnFocus = btnElem.filter(function (index, item) {
return $(item).hasClass(doms[0] + '-' + autofocus.substr(0, 3) + (btnNum - 1));
}).first();
} else {
btnFocus = btnElem.first();
}
btnFocus && btnFocus.length && btnFocus.focus();
layero.one('click', function (event) {
btnElem.attr('href', null);
})
}
if(config.success){ if(config.success){
if(config.type == 2){ if(config.type == 2){
layero.find('iframe').on('load', function(){ layero.find('iframe').on('load', function(){
@ -679,7 +711,7 @@ Class.pt.callback = function(){
layer.ie == 6 && that.IE6(layero); layer.ie == 6 && that.IE6(layero);
//按钮 //按钮
layero.find('.'+ doms[6]).children('a').on('click', function(){ btnElem.on('click', function(){
var index = $(this).index(); var index = $(this).index();
if(index === 0){ if(index === 0){
if(config.yes){ if(config.yes){
@ -1058,6 +1090,7 @@ layer.prompt = function(options, yes){
return layer.open($.extend({ return layer.open($.extend({
type: 1 type: 1
,btn: ['确定','取消'] ,btn: ['确定','取消']
,autofocus: false
,content: content ,content: content
,skin: 'layui-layer-prompt' + skin('prompt') ,skin: 'layui-layer-prompt' + skin('prompt')
,maxWidth: win.width() ,maxWidth: win.width()
@ -1069,9 +1102,10 @@ layer.prompt = function(options, yes){
,resize: false ,resize: false
,yes: function(index){ ,yes: function(index){
var value = prompt.val(); var value = prompt.val();
if(value === ''){ // if(value === ''){
prompt.focus(); // prompt.focus();
} else if(value.length > (options.maxlength||500)) { // } else // 允许为空
if(value.length > (options.maxlength||500)) {
layer.tips('最多输入'+ (options.maxlength || 500) +'个字数', prompt, {tips: 1}); layer.tips('最多输入'+ (options.maxlength || 500) +'个字数', prompt, {tips: 1});
} else { } else {
yes && yes(value, index, prompt); yes && yes(value, index, prompt);