版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39425864/article/details/81363122
先贴图
要做这个效果 input的placeholder=""肯定不行 只能自己写了
贴代码 html
<div class="na">
<label><span>姓名 </span><span> Name</span></label>
<input type="text" class="name" value="" />
</div>
css:
html, body{height: 100%;}
body{background: url(images/bj.png) no-repeat;background-size: 100% 100%;}
.na input{position: absolute;top: 0;left: 0;display: none; width: 100%;font-size: 18px;
height: 70%;border: none;padding-left:10px ;
margin-top: 2%;outline:none;}
.na{width: 48%;box-sizing: border-box;margin-top: 7px;}
.na{width: 100%;}
.na label{ display: block;padding: 7px 10px;width: 100%;height: 100%;}
label>span:first-child{font-size: 16px;}
label>span:last-child{font-size: 12px;}
label>span{color:#9a9a9a;}
js:
$('label').click(function(){
$(this).next('input').show().focus();//先展示再自动获取焦点,顺序别弄错了
})
$("input").blur(function(){
if($(this).val().length<1){
$(this).hide();//失去焦点后判断有没有输入
}
});