本文详解如何在layui的layer.confirm弹窗中获取按钮焦点。针对IE11,通过success回调利用getElementsByClassName定位a标签并调用focus();针对不支持该方法的IE8,提供自定义getElementsByClassName函数的兼容实现,确保弹窗按钮可正常获取焦点。
layer.confirm按钮焦点获取原理与IE11实现
由于layer.confirm生成的按钮并非标准的button元素,而是使用a标签渲染,因此无法直接通过常规方式获取按钮焦点。为解决这一问题,需要采用特定的处理手段,下文将分别介绍在IE11和IE8浏览器中的具体实现方式。
在IE11浏览器环境下,可以通过layer.confirm的success回调函数来操作DOM。
layer.confirm('确定取消这个弹窗吗?',{
btn: ['确定', '取消'],
success:function(layero){
//获取焦点
var btn = layero[0].getElementsByClassName('layui-layer-btn')
[0].getElementsByTagName('A')[0];
btn.href = 'javascript:void(0)';
btn.focus();
},
title:"提示"
},function(index){
layer.close(index);
//你的操作
});
})IE8兼容getElementsByClassName方法重写
然而,在IE8浏览器中,原生不支持getElementsByClassName方法,因此需要对该方法进行额外的兼容处理。
layer.confirm('确定取消这个弹窗吗?',{
btn: ['确定', '取消'],
success:function(layero){
//获取焦点
var btn = getElementsByClassName('layui-layer-btn')
[0].getElementsByTagName('A')[0];
btn.href = 'javascript:void(0)';
btn.focus();
},
title:"提示"
},function(index){
layer.close(index);
//你的操作
});
})我们需要手动重写getElementsByClassName方法以支持IE8。
var getElementsByClassName = function (searchClass, node,tag) {
var result = [];
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.all: node.getElementsByTagName(tag),
patterns = [],
current,
match;
var i = classes.length;
while (--i >= 0) {
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while (--j >= 0) {
current = elements[j];
match = false;
for (var k = 0,
kl = patterns.length; k < kl; k++) {
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) result.push(current);
}
return result;
}上述第二种方法具有良好的兼容性,如果用户不介意代码稍显繁琐,可以直接采用此方案。
至此,关于layui的layer.confirm获取按钮焦点的解决方案介绍完毕。如需了解更多相关layui layer.confirm技巧,请查阅本站往期文章或继续阅读后续内容,感谢大家的支持!