zoukankan      html  css  js  c++  java
  • textarea的placeholder属性兼容ie8ie9

           前一阵子公司项目里用到了textarea的placeholder的属性,然后不兼容ie8ie9,去公司插件库里一看,妹的,只有input的兼容封装,欲哭无泪,然后在网上又查了好多,大部分都是写input的placeholder的兼容性,我刀呢?!?!?!

    没法子,又不能不管,可是我又不会封装插件的能力实在是有限啊,所以,就模仿了input的元素替换的方法,最后用了一个很笨的方法给弄出来了,请各路大神不要嘲笑,哈哈。

    一、html部分:  

    <textarea class = "research_description" maxlength="200" placeholder="最多可输入200字"></textarea>
    <span class = "ieTextarea ieTextHide">最多可输入200字</span><--一个替换placeholder的元素span-->

    二、less部分:

    样式具体的我就不写了,只写用到的这两个样式:

    .ieTextarea{
      color:#999!important;
      position:absolute;
      top:18px;
      left:30px;
    }
    .ieTextHide{
      display: none;
    }

    三、js

    if(navigator.userAgent.indexOf("MSIE 8.0")>0 && ! window.innerWidth){
      var $textarea = $('textarea');//获取元素集合
      $.each($textarea,function(i,el){//遍历
        if($(el).text() == ''){
          $(el).siblings('.ieTextarea').removeClass('ieTextHide');
        }else{
          $(el).siblings('.ieTextarea').addClass('ieTextHide');
        };
      });
      $('.ieTextarea').off('focus').focus(function(){//span聚焦的时候
        $(this).addClass('ieTextHide');
        $(this).siblings('textarea').focus();//模仿textarea聚焦
      });
      $('textarea').off('blur').blur(function(){
        if($(this).text() == ""){
          $(this).siblings('.ieTextarea').removeClass('ieTextHide');//失焦的时候让模拟span显示
        }
      });
      $('textarea').off('focus').focus(function(){
        $(this).siblings('.ieTextarea').addClass('ieTextHide');
      });
    }

  • 相关阅读:
    hdu 1695 GCD(欧拉函数+容斥)
    hdu 5072 Coprime (容斥)
    hdu 4135 Co-prime(容斥)
    畅通工程,继续畅通工程,畅通工程再续,多种解法
    Palindrome
    括号匹配(二)(动态规划)
    搬寝室(动态规划)
    Common Subsequence(lcs)
    周赛题解
    亲和串(两种方法妙解)
  • 原文地址:https://www.cnblogs.com/youngboy-front/p/7001655.html
Copyright © 2011-2022 走看看