关于input与IE8的一些事

最新推荐文章于 2019-06-27 03:58:02 发布

YanzYan

最新推荐文章于 2019-06-27 03:58:02 发布

阅读量1.6k

点赞数 1

分类专栏：微信小程序文章标签： ie 8 placeholde radio 去掉input的X input

本文链接：https://blog.csdn.net/yanzyan/article/details/62429526

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如题今天想来记录下关于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;}