解决IE中placeholder的兼容问题

Posted 2020-10-21 libijun96

　　定义和用法

　　　　placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

　　　　该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

　　　　注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

　　问题：

　　　　由于placeholder 属性是 html5 中的新属性，所以IE10以下不支持该属性，有问题就会有解决办法，我的方法就是，利用label和input组合，去模拟实现placeholder属性带来的效果，具体步骤如下：

　　　　HTML代码：

<!--搜索框-->
<div class="texts">
 　　<input type="text"/><label for="text">毛巾  暖冬装备</label>                        
</div>

 　　　　CSS代码：

.texts{
    position:relative;
}
.texts>input{
    width:238px;
    height:26px;
    line-height: 26px;
    border:1px solid black;
        /*输入文字时会与框头有间距*/
    padding-left: 10px;
}
.texts>label{
    position:absolute;
    left:10px;
    top:5px;
    font-size:15px;
    color:#b0b0b0;
    cursor:text;
}    

 　　　　JS代码：

var oTexts=document.getElementsByTagName("input")[0];
var oLabel=oSearch.getElementsByTagName("label")[0];
/*文本框失去焦点时，此时若框内无值，则让框内提示文字（也就是label）显示,若框内有值，则隐藏提示文字*/
oTexts.onblur=function(){
    if(this.value==""){
        oLabel.style.display="block";
    }else{
        oLabel.style.display="none";
    }
    
};
//文本框获得焦点时，让提示文字（也就是label）隐藏
oTexts.onfocus=function(){
    oLabel.style.display="none";
};
//点击提示文字时（也就是label），就让文本框获得焦点并且隐藏自己
oLabel.onclick=function(){
    oLabel.style.display="none";
    oTexts.focus();
};

　　　　原理简单而又巧妙，其实就是用一个标签去代替placeholder文本，用一个div包裹文本标签和label标签（也可以是别的标签），让他们分别相对于父级定位，做出placeholder实现的效果，接着就是JS的活儿了，我们要去分析在文本框获得焦点、失去焦点这些过程中，都出现了哪些动效，再将这些逻辑语言化为JS语言，其实不同的需求下，JS代码也会有所不同，只要掌握了原理，配到不同的需求，大家可以做出相应改变。