更新 : 2019-12-22

focusInitialElementWhenReady 
我们经常会调用到这个方法, 它的逻辑是这样
先看有没有 cdkFocusInitial 有的就 focus (不管它是不是 tabbable, 比如 disabled 就不是 tabbable)
如果你没写这个,那么它就去找 cdkFocusRegionStart 
然后 focus, 同样不管是不是 tabbable
依然找不到那么它就去整个 focus trap element 里面找 第一个 tabbable 的 element 来 focus (注意这里是 tabbable 哦, disabled 会 skip 掉)
 
虽然看上去很厉害但是还是很多场景是不支持的。
比如有一个 dialog, 开头是一个 close button 然后第一个 input 某些时候是 disabled 的. 
这种情况下就不行了. 
因为我们的意图是, 不管 close button + focus 第一个 tabbable input 
目前用烂招, disabled close button for 1 second 让 focus 完成后再 enable 回来
 
 
 

基础知识 :

focus, tabindex 

div by default 是不可以被 focus 的.

button by default 就可以被 focus

要想 focus div, 我们可以写 tabindex = -1

这个表示可以 focus 但是不可以 tab

如果要可以 tab 那么是 tabindex = 0

tabindex 的号码可以用来表示 focusable 和 tabable

还有顺序功能. 游览器会从 1 开始 tab to next 然后越来越大, 数字重复就用 parent -> child -> sibling 的顺序 (所以对于一个区块只要分配一个值就可以了) . 最后才去 tabindex 0.

所以修改后的顺序就是

1,1,2,2,2,2,3,4,5,0,0,0.... 这种

button vs div, keyup enter 

当 button focus 的时候如果 enter 那么会触发 click 事件.

当 div focus + enter 时, 啥也不会触发. 需要自己写监听 enter event 模拟一下. (这里要留意哦, 如果这个 div 里有 input, 那么是会冒泡上来的)

onblur to body

当一个被 focus 的 element 被删除后, 游览器会把 focus 移去 body. 不是parent 也不是 next 哦。

cdk focus monitor 

ng 是用监听 focus 和 blur capture 来实现的, 不是 bubble 哦

然后触发时是在 outside angular zone 处理的事件监听.

所以经常会一种 bug 就是当一个 detech change cycle 开始后, 我们修改 state, dom 渲染时移除 dom

刚巧 dom 是被 focus 着的, 游览器就移动去 body 同时 blur 事件触发.

monitor 马上响应 (如果没有 outside zone,事件会排队然后触发下一次的 cycle)

马上响应,如果我们在监听里去修改 state, 那么就会导致一个 detech change cycle 进入渲染阶段后又修改 state, 然后就会报错了.

解决方法就是监听处理前先 delay 一下. Promise.resolve().then...

Overlay 经常破坏 focus monitor 

overlay 会把内容丢去 body 如果我们 focus 里面的内容,很自然就去到外面了,monitor 会发现 blur 了。

但我们通常不希望这样. 解决方法就是自己做记入判断

比如当打开 overlay 后做一个 overlayOpened = true, 判断的时候就 blur = origin === null && !overlayOpened

这样才行.

Angular 学习笔记 (cdk focus monitor 和一些 focus tabindex 的基础)的更多相关文章

  1. Angular 学习笔记 ( CDK - Accessibility )

    @angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家 ...

  2. Angular 学习笔记 ( CDK - Portal )

    Portal 的主要使用场景是 dynamic component 动态的插入模板或组件. Portal 可分为 2 种. 进入和出去 (in or out) ComponentPortal, Tem ...

  3. Angular 学习笔记 ( CDK - Overlays )

    更新 : 2018-01-30 ng 的 overlap 在关闭的时候对 backdrop 做了一个 style pointer 目的是让 backdrop 不被 2 次点击, 但是呢,  css p ...

  4. Angular 学习笔记 ( CDK - Layout )

    简单说就是 js 的 media query. 1. BreakpointObserver  const layoutChanges = this.breakpointObserver.observe ...

  5. Angular 学习笔记 ( CDK - Observers )

    <div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged( ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  8. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  9. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. vuejs2从入门到精通视频教程

    https://www.cnblogs.com/web-666/p/8648607.html 一.基础部分 0.课件 1.介绍 2.vue实例 3.模板语法 4.计算属性和观察者 5.Class与St ...

  2. vue-使用keepAlive对上下拉刷新列表数据 和 滚动位置细节进行处理

    [前言] 使用vue处理项目中遇到列表页面时,有一些细节需要注意,这里总结一下,以便优化以后的代码.如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法触发上拉加载更多的方法 ...

  3. consul_nginx_uprsync动态负载均衡

    consul_nginx_uprsync动态负载均衡 环境准备: 原理描述: 将Nginx的负载均衡后端服务器配置信息写入consul的接口中,upsync插件通过读取consul的配置,然后持久化到 ...

  4. ES6深入浅出-8 新版的类(下集)-1.简单语法

    回顾 当你声明一个空的对象obj的时候,会生成一块内存这个内存里面什么都没有,自由__proto__存在401的地址. 也就是Object的protototype在内存中的地址 类 通过函数创建类.这 ...

  5. Centos7 手动编译 RabbitMQ ,并安装php amqp

    RabbitMQ是一个在AMQP基础上完成的,可复用的企业消息系统,底层基于Erlang语言. 一:centos7安装RabbitMQ 这玩意儿安装很扯淡,官方推荐rpm安装,rpm安装本身是最简单的 ...

  6. 报错:Error starting Jetty. JSON Metrics may not be available.java.net.BindException:地址已在使用

    报错背景: 刚在CDH中集成Flume插件,启动报错 报错现象: Error starting Jetty. JSON Metrics may not be available. java.net.B ...

  7. C#中Invoke的用法(转)

    invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和beg ...

  8. 怎么改变wampserver默认的网站目录

    现在大家基本上开发php的有很大一部分都在用Wampserver,今天来讲讲怎么更改默认的www目录, 需要修改的文件有三个 apache2的配置文件 httpd.conf 和 Wampserver的 ...

  9. MySQL之忘记root重置方法

    参考:https://help.aliyun.com/knowledge_detail/42520.html MySQL忘记了root登录密码需要重置 1,修改配置文件 一般配置文件路径为/etc/m ...

  10. Python常见的异常

    Python中常见的异常如表所示. exception的更多用法: 1.通常else 语句只有在没有异常的情况下才会被执行 try: aa = "异常测试:" print(aa)e ...