焦点陷阱
围绕元素添加焦点陷阱.
添加焦点陷阱是您网站访问的重要内容. 要设置焦点陷阱的最常见例子是模式. 虽然模式是开放的,但用户不应该在模式之外进行标签,焦点应该被锁定在模式元素内. 你要记住确保永远有办法 摆脱这个焦点陷阱 在模式示例中,通常是出逃键,或者在角落关闭按钮.
安装
使用 npm
npm install @daniel.husar/focus-trap
使用线条
yarn add @daniel.husar/focus-trap
使用量
import FocusTrap from '@daniel.husar/focus-trap';
// Setup trap
const trap = new FocusTrap({ node: document.querySelector('#my-trap') });
// Release trap
trap.restore();
构造器 API
带有这些属性的建构器接受对象 :
new FocusTrap({
node: document.querySelector('#my-trap') }),
firstElement: () => document.querySelector('#first-element'),
lastElement: () => document.querySelector('#last-element'),
disableStartingTrap: () => false,
disableEndingTrap: () => false,
});
节点
类型 : DOM element
默认 : none
要求 : true
这是您要设置的 DOM 节点
第一元素
类型 : Function
默认 : () => null
要求 : none
函数返回将在焦点启动时跳回时替换第一个元素的元素 。 要连接2个焦点陷阱时全用 。 如果函数返回 falsy 值, 将返回到焦点陷阱中的第一个 Element .
最后一个元素
类型 : Function
默认 : () => null
要求 : none
函数返回将替换最后一个元素, 当焦点将跳回尾端 。 要连接2个焦点陷阱时全用 。 如果函数返回 falsy 值, 则会回落到焦点陷阱中 lastElement .
禁用启动拖放
类型 : Function
默认 : () => false
要求 : none
如果启动陷阱被禁用, 返回布尔函数 .
禁用结束拖放
类型 : Function
默认 : () => false
要求 : none
如果终止陷阱被禁用, 可以返回布尔函数 .
接口
重新计算可实现要素
类型 : Function
重新计算陷阱内的可聚焦元素。 如果节点的内容随时间而变化, 则完全使用 .
恢复
类型 : Function
从元素中删除焦点陷阱 .
许可证
麻省理工学院 丹尼尔·胡萨尔