前端常见的不常见问题

前端的随意笔记

标签（空格分隔）： 前端不常见的问题 angularjs jquery

---

一、select2模态层内失效问题

$.fn.modal.Constructor.prototype.enforceFocus = function () { };

modal显示的时候必须让modal的enforceFocus方法制空（所谓的no-op否则的话会有个异常。）。然后隐藏的时候再还原。

二、IE8下placeholder失效

最简单粗暴的解决方式引用jquery-placeholder 或者 angular-placeholder.
主要是看当前框架使用的是什么了，基于angularjs最好是用angular-placeholder,可以直接将插件封装到自己的项目中作为指令使用，目前IE8对textarea支持不好。

三、jquery事件和angularjs结合使用莫名其妙报错

这种问题比较常见了，如果二者结合使用会莫名其妙报错纯属正常，不要慌。因为angular的事件机制和jquery的事件机制完全不同，会发生冲突，但是在angularjs里解决这个问题又很困难，往往jquery的一个模拟用户事件就能简单解决。这时候，你只要写一个简单的定时器就可以解决这个问题：

 $timeout(function () {
     angular.element('table thead tr th input[type="checkbox"]').click();
            }, 0, false);

四、IE8纯css实现圆角圆形

代码如下：

CSS代码：
.box {
    width: 150px; height: 150px;
    line-height: 150px;
    position: relative;
    overflow: hidden;
}
.radius {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 149px dotted;
    /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */
    margin: 0 0 1px 1px;
    border-width: 0vw;
    margin: 0vw;
    color: #cd0000;
    background-color: currentColor;
}
.text {
    position: relative;
    color: #fff;
    text-align: center;
    font-size: 24px;
}
HTML代码：
<div class="box">
    <i class="radius"></i>
    <p class="text">圆形</p>
</div>

当然，最简单粗暴的方式就是直接background-image，可参考