关于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;}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值