2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

关于layer弹层之后焦点的重新调整的必要性和可行性讨论

已完成
成员
创建于  
2022-07-16 03:43

前情提要:关于弹出框打开后 焦点 还在原元素上
弹出layer之后,一般来说我们关注焦点会移到弹层中,目前的版本(v2.7.4)在弹出之后没有内置的对焦点进行处理,所以会出现像在https://layui.gitee.io/v2/docs/modules/layer.html中点击在线调试中的“立即运行”,弹出之后按回车键,会发现又重新弹出一个,那是因为document.activeElement还留在“立即运行”按钮上,如果要避免这种重复弹窗可以加一个id

layer.open({
  title: '在线调试'
  ,id: 1
  ,content: '配置各种参数,试试效果'
});

但是这样背后实际还是触发了open,只是因为有id确保了它不会重复弹出。
另外一般来说弹窗都会有一些默认聚焦按钮可以通过回车快速点选操作,综合以上对弹层之后做了一些焦点的处理:

添加autofocus配置支持 测试链接:https://codepen.io/sunxiaobin89/pen/qBoqepq

在alert,confirm,load默认为true其他默认为false,同时也支持设置为'btn2'等指定默认聚焦到哪个按钮。
输入图片说明
对这个功能有兴趣的小伙伴们有实际的运用场景提出自己的看法,看这个修改是否有必要,帮忙测试看看有没有问题。

评论 (11)

sunxiaobin 创建了任务
sunxiaobin 添加了
 
交流
标签
展开全部操作日志

重复弹出应该算是bug吧,我觉得既然页面出现了弹出框,那么画面的焦点或者说是用户的操作也是集中在弹出框上的,autofocus对简单的弹出框使用上没问题,但是如果是弹出复杂元素是否可以在标签上添加属性让layer自动渲染呢?

后半部分不是很明白你的意思额,是说在弹出的内容中会涉及到焦点调整么?比如打开一个表达,之后会默认聚焦到一个输入框中?还是其他意思呢不是很清楚。如果是的话插件中修改的是在success回调前做的处理,所以遇到上面有重新focus的需要的话可以在success中自己指定,这个是没问题的比如测试链接中的“弹出并且在success中调整了focus”中的效果,最终焦点会到success设定的input上,如果理解的不对还望指正

是这样的意思,但是我说的做法类似以下这样,因为平常敲html都习惯在input标签内加autofocus,这里也顺道说下,autofocus在弹出框的表单内无效 :sweat_smile:,这算BUG吗?
//lay-focus <input type="text" lay-focus id="" name="" />

autofocus他只有在页面加载完成的时候起作用,跟layer没有关系额,比如你可以试试看用js给body添加一个input节点并且设置它autofocus看看添加之后有没有focus到,一般需要用js去focus();
lay-focus?恩恩,大致了解你的意思,是不是希望lay-focus在执行form.render之后可以被自动focus,目前并没有lay-focus这个属性支持,个人觉得这块还是自己在需要的时候去focus()特定的节点,这样控制起来更加自由一些。

了解,另外我的意思是lay-focus(如果有)主要在layer.open时自动获取焦点,可用标签不限于input、botton,当然如果可以代替自带的autofocus那是最好,只是一点建议而已 :smile:

这样的效果 还是很支持的

sunxiaobin 任务状态待办的 修改为进行中

@sunxiaobin 我发现 除了这个 这些 提示框 ,加载动画,也存在同样问题,加载动画作为阻挡层行为 但是焦点回车还是 可以 正常点击
方案1:移除掉原有焦点
方案2:暂时移除掉原有焦点,在动画消失时还原焦点

@Ray @逆血 @思田
这一块在 岁月 @sunxiaobin 的努力下,最终还是进行了相关优化。

见:https://gitee.com/layui/layui/releases/tag/v2.8.0-beta.3

非常感谢,辛苦了。 :clap:

很棒!

贤心 任务状态进行中 修改为已完成
贤心 添加了
 
精华
标签

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(5)
627027 sun zoro 1578929630 92529 sentsin 1578917144
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

53164aa7 5694891 3bd8fe86 5694891