JQ控制input自动获取焦点

版权声明：本文为博主原创文章，未经博主允许不得转载。 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();//失去焦点后判断有没有输入
	 }
});