JQ控制input自动获取焦点

先贴图

JQ控制input自动获取焦点_第1张图片

要做这个效果   input的placeholder=""肯定不行  只能自己写了

贴代码  html

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();//失去焦点后判断有没有输入
	 }
});

 

你可能感兴趣的:(前端开发)