Angular 学习笔记 (cdk focus monitor 和一些 focus tabindex 的基础)
更新 : 2019-12-22
基础知识 :
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 的基础)的更多相关文章
- Angular 学习笔记 ( CDK - Accessibility )
@angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家 ...
- Angular 学习笔记 ( CDK - Portal )
Portal 的主要使用场景是 dynamic component 动态的插入模板或组件. Portal 可分为 2 种. 进入和出去 (in or out) ComponentPortal, Tem ...
- Angular 学习笔记 ( CDK - Overlays )
更新 : 2018-01-30 ng 的 overlap 在关闭的时候对 backdrop 做了一个 style pointer 目的是让 backdrop 不被 2 次点击, 但是呢, css p ...
- Angular 学习笔记 ( CDK - Layout )
简单说就是 js 的 media query. 1. BreakpointObserver const layoutChanges = this.breakpointObserver.observe ...
- Angular 学习笔记 ( CDK - Observers )
<div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged( ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- 分析imx8mm-evk评估板的pinctrl设备树
1. 分析arch/arm64/boot/dts/freescale/imx8mm-evk.dts中的i2c3相关的pinctrl_i2c3节点 pinctrl_i2c3: i2c3grp { fsl ...
- PHP7 MongoDB 使用方法
原文链接: http://www.zhaokeli.com/article/8574.html MongoDb原生操作 Mongodb连接 PHP7 连接 MongoDB 语法如下: 复制代码 $ma ...
- 关于golang中IO相关的Buffer类浅析
io重要的接口 在介绍buffer之前,先来认识两个重要的接口,如下边所示: type Reader interface { Read(p []byte) (n int, err error) } t ...
- Typescript 介绍和安装编译
一. Typescript 介绍 1. TypeScript 是由微软开发的一款开源的编程语言. 2. TypeScript 是 Javascript 的超级,遵循最新的 ES6.Es5 规范.Typ ...
- 标量子查询调优SQL
fxnjbmhkk4pp4 select /*+ leading (wb,sb,qw) */ 'blocker('||wb.holding_session||':'||sb.username||')- ...
- c# 在静态方法里,怎么能得到调用者的类名?
System.Diagnostics.StackTrace st = new System.Diagnostics.StackTrace(); string name = st.GetFrame(1) ...
- Swift4.0复习协议
1.协议的定义: /// 定义一个协议MyProt protocol MyProt { /// 声明了一个实例方法foo, /// 其类型为:() -> Void func foo() ...
- 【Leetcode_easy】1154. Day of the Year
problem 1154. Day of the Year solution class Solution { public: int dayOfYear(string date) { // 平年 闰 ...
- 使用mousedown、mousemove、mouseup实现拖拽效果
如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...
- 接口请求报错 504 Gateway Time-out
最近程序接口请求报了一个错误,如图 很明显的请求超时,以前也没出现过这个问题,突然就报了这个错,很懵. 百度之后网上说是nginx的问题,然后突然想起来,因为业务需要我在nginx里配了接口的转发. ...