使用input + label替代placeholder

来源:互联网 发布:淘宝达人2c 编辑:程序博客网 时间:2024/06/01 09:23

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;**}

JS

$(".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");