这个可能是网页没有设置 meta charset 编码造成。
添加如下代码
<meta charset="UTF-8" />
将 disabled 写在 input 上
<input type="text" class="form-control" id="name" placeholder="姓名" disabled />
如下代码,点击时报错,显示函数未定义
<button type="button" class="btn" id="getCode" onclick="getCode()"></button>
改成在 js 写事件监听
$("#getCodeBtn").on("click", function() {
getCode();
});
使用 font-awesome 的动画时(loading 效果),倘若用 display 控制显隐,则在 IE 下会表现异常。 图标会瞬间显示出来,但是却没有动画或者过渡效果。
暂时理解为 CSS3 的 animation
、transition
、transform
不支持 display 的改变,直接操作 display 会破坏动画。
关于 display 为何会破坏 css 动画,目前个人理解是,display 的操作会触发浏览器的 reflow 操作,而 transition 支持的效果只是触发浏览器的 repaint 操作,回到上面的 demo,如果我们通过 visibility 属性来控制显示与隐藏,则不会破坏 transition 的效果。所以,可以暂时这么认为:reflow 与 repaint 的混合会破坏 transition 的动画效果
setTimeout
来 hack 这个问题
本质上也是改变了 set 操作的顺序,只是 delay 的值在不同浏览器下需要选取的值也不同
container.css("display", "block"); setTimeout(function() { container.css("opacity", "1"); }, delay);
window.requestAnimationFrame
来实现
container.css("display", "block"); requestanimationframe(function() { container.css("opacity", "1"); });