HTML 属性相关
autofocus
基本概念
autofocus特性让你能够指定一个表单控件,当页面载入后该表单自动获得焦点,除非用户覆盖它,例如在另一个控件中输入值。一个文档内只有一个表单能够拥有autofocus
特性,它是一个 Boolean 值。这个特性适用于
<input>, <button>, <select>, 与 <textarea>元素
复制代码
例外情况是,如果一个 autofocus 元素的 type 特性值设置成了 hidden,则 autofocus 无法生效(就是说,你无法让一个隐藏控件自动获得焦点)。
可能导致的问题
1.autofocus使input获取焦点时,不会触发focus事件,此时再次点击input 因为focus已经获取焦点,所以依旧不会触发focus事件
推荐使用mousemove和click事件结合,手动触发focus事件内的内容
2.autofocus使input获取焦点时切换标签页,会触发input的blur事件,但是当再切换会原来的标签页时,会再次使input获取焦点,同时触发focus事件(如果手动点击页面使input失去了焦点,此时切换标签页后input不会重复获取焦点)
3.由于浏览器的限制策略,无法通过js直接使input获取焦点,但是可以在用户手动触发click时调用focus事件,此时可以使input获取焦点
CSS 相关
animation
基本概念
animation
属性用来指定一组或多组动画,每组之间用逗号相隔。
safari 中的异常行为
@keyframes kk {
from {
opacity: 0;
}
to {
opacity: 0.6;
width: 10px;
pointer-events: auto; }
}
.dd {
opacity: 0;
pointer-events: none;
}
.dd:hover {
animation: kk 0.3s forwards;
}
复制代码
有时我们会做一个隐藏的按钮,等鼠标移入的时候再显示,为了使节点出现的不是那么突兀,会设置透明和不可点击,但是在safari中这种设置是有一些问题的;
该动画效果中 to 时的状态包含的内容与from中的不一致
safari中pointer-events属性会被忽略,此时需要在hover伪类中单独设置此属性的状态
chrome中可以执行pointer-events相关的变化
暂时未发下其他属性有类似问题;
JS 相关
scroll 事件
基本概念
文档视图或者一个元素在滚动时,会触发元素的 scroll
事件。
safari 中的异常
safari中当滚动条触底或者触顶时,依然可以拖动滚动条来触发滚动事件
此时需要对scroll事件添加判断代码,避免不必要的程序执行造成异常