JQ控制input自動獲取焦點
阿新 • • 發佈:2019-02-11
先貼圖
要做這個效果 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();//失去焦點後判斷有沒有輸入
}
});