解决layui layer.confirm按钮焦点获取问题:IE8与IE11兼容方案

作者:开源拾贝时间:2026-10-31 08:25:34浏览:231

本文详解如何在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技巧,请查阅本站往期文章或继续阅读后续内容,感谢大家的支持!

作者最新文章