关于input与IE8的一些事

如题 今天想来记录下关于input一些属性如何兼容IE8，如placeholder…

闲谈

等下啊 先唠唠家常 毕竟是我个人的博客 最近也有些感慨 故记录一下
前两篇我写的都是关于微信小程序的内容，那时候是一月份，最近的一篇也是在1月16号，今天刚好是3月16号，想来也是缘分。刚刚好两个月，我终于又登上了自己的博客，而这一次我也终于不再是小白了，至少不是前端小白 哈哈。不过关于安卓，也忘得差不多了。

对了 还想起来一件事情 就是我看自己前面写的博客 发现有一篇是很多代码的 当然了我现在已经完全不记得了 也懒得再去重新一行一行理解 所以最好的办法还是记录思路 代码尽量提供可以下载的。

好了。接下来进入正题。

Content

• 关于input的placeholder属性兼容ie8+
• 修改默认单选框样式 适用于所有浏览器
• 去掉IE10+的默认input样式 去掉input的X和眼睛

placeholder兼容ie8

听大神说有很多解决办法，比如什么找插件啦 之类的

我使用的办法是替代- -你不行就不用你
思路：用span标签定位代替placeholder属性.
每一个input后面跟个小尾巴span，用div标签包裹（为了定位）。span的位置基于包裹其的div。

    <div class="wrap"><input type="text"><span>用户名</span></div>    <div class="wrap"><input type="password"><span>密码</span></div>

注：input标签不需要再有placeholder属性，否则会出现重影。

最关键的是js代码，需要在当前input聚焦和键盘输入（focus/keydown事件）的时候将当前 input的小尾巴span 即$(this).siblings(‘span’)隐藏。当失焦和停止输入（blur/keyup）的时候，判断所有的input是否有值，没有值的input紧跟着的span出现！span的出现和隐藏用class控制（display：none）；

<script>    $(function(){        $('input').keydown(function(){            $(this).siblings('span').addClass('disappear');        });        $('input').focus(function(){            $(this).siblings('span').addClass('disappear');        });        $('input').keyup(function(){            if($(this).val().length==0){               $(this).siblings('span').removeClass('disappear');            }        });        $('input').blur(function(){            if($(this).val().length==0){               $(this).siblings('span').removeClass('disappear');            }        });    })  </script>

我自己做了一个例子，下载地址：http://download.csdn.net/detail/yanzyan/9902039

修改默认单选框样式

用label标签将input包裹住（input同name值会归为一组）

<label><input type="radio" name="rule"></input></label><label><input type="radio" name="rule"></input></label>

注意：label必须设置width height display：block/inline-block三个属性

width:20px;height:20px;display:inline-block;background: url(C:/Users/edianzu/Desktop/box.png) no-repeat;

js部分 这部分很赞 因为要做到选中当前label时 当前label包裹的input的checked值变为checked。

 <script>    $(function(){        $('label').click(function(){            $('label').removeAttr('class') && $(this).attr('class', 'checked');            $('label').children('input').removeAttr('checked')             && $(this).children('input').attr('checked', 'checked');        });    })  </script>

还有这个jq有一个很厉害的地方就是：

• 选中了全部的label除了当前的label有某个属性之外，其他label都没有。例如 $('label').removeAttr('class') && $(this).attr('class', 'checked'); 用 $(this) 来区别。
• 另外一个就是其实也可以不用加class $(this).attr('class', 'checked') ,直接用$(this).css('display','none') ，但是其实用加class的方法会更好，因为去除display属性的时候带来了便利，加class的方式用removeAttr就好了，但是用css方法那你到底是变成display：block还是display：inline-block呢？这种处理方式会经常碰到，我上次遇到了一个，是列表的，奇数行和偶数行背景色不一样 当时当选中整行时，背景色变成某个颜色，在这种情况下就能体现出加class的便利性了。因为假如我用了 $(this).css('background-color','#F4F5F9') 但是当我不选中当前行的时候到底要变回哪个颜色？还得做判断！故用添加和移除class属性的方法会比较好。

我自己做了一个例子，下载地址：http://download.csdn.net/detail/yanzyan/9784189

去掉IE10+的默认input样式 去掉input的X和眼睛

这部分内容我在网上找的，本来想兼容到ie8的，但是一直没有找到正确的解决办法。百度出来的全是IE10以上的，我这里也做下笔记，说不定下次遇得到- -input在IE上有默认样式 文本框当我们输入内容时末尾会有一个叉，密码框会有一只眼睛。

解决办法：

input::-ms-clear { display: none;}input::-ms-reveal { display: none;}