使用input + label替代placeholder

最新推荐文章于 2024-06-27 20:36:21 发布

多隆

最新推荐文章于 2024-06-27 20:36:21 发布

阅读量1.8k

点赞数 1

分类专栏： # 前端

本文链接：https://blog.csdn.net/huayushuangfei/article/details/78325897

版权

前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

HTML

<div class="input-wrapper">
    <input id="inputID" type="text">
    <label for="inputID">请输入...</label>
</div>

Style

.input-wrapper {
    width: 300px;height: 42px;margin-bottom: 20px;position: relative;
}

.input-wrapper input {
    width: 290px;
    height: 36px;
    line-height: 36px;
    padding: 2px 4px;
    border: 1px solid #DAE5E6;
    background: #F2FEFF none repeat scroll 0% 0%;
    font-family: tahoma,arial,simsun,sans-serif;
}

.input-wrapper label {
    width: 290px;
    height: 36px;
    line-height: 36px;
    padding: 3px 5px;
    font-family: simsun;
    font-size: 14px;
    color: #999;
    **cursor: text;
    position: absolute;
    top: 0px;
    left: 0px;**
}

$(".input-wrapper").on("input", function() {
    var v = $(this).find('input').val();
    if (v == null ||v == "") {
        $(this).find('label').css("display", "block");
    } else {
        $(this).find('label').css("display", "none");
    }
}).trigger("input");