简单JS模拟input的placeholder属性

H5的盛行给WEB开发带来了巨大的便利,但对于低版本浏览器,例如IE8及以下,噩梦并没有停止…
比如,input中的placeholder属性,这个属性对于用户输入来说,是非常友好的,但IE8及以下却不支持……
今天就给大家说一下简单JS模拟这个input中的placeholder属性:

效果展示:

HTML代码:

<div class="input itHolder">
    <input type="text" autocomplete="off" />
    <span class="placeholder txt1">请输入手机号</span>
</div>

CSS代码:

.itHolder{
    position: relative;
}
.placeholder{
    position: absolute;
    font-size: 14px;
    color: #CCCCCC;
}
.input{
    display: inline-block;
    width: 160px;
    height: 40px;
    border: 1px solid #d4d4d4;
}
.input input{
    border: none;
    outline: none;
    background: none;
    width: 140px;
    height: 30px;
    line-height: 30px;
    padding: 5px 0;
    margin-left: 10px;
}
.txt1{
    left: 10px;
    top: 0;
    line-height: 40px;
}

JS代码:

$("input").siblings(".placeholder").click(function(){
    $(this).siblings("input").focus();
});
$("input").bind("input propertychange",function(){
    $(this).siblings(".placeholder").hide();
});
$("input").blur(function(){
    if($(this).val()==''){
        $(this).siblings(".placeholder").show();
    }
});

同样适用于textarea标签的placeholder属性哦~

发表评论

电子邮件地址不会被公开。 必填项已用*标注