JQ控制input自动获取焦点

本文介绍了一种使用HTML、CSS和JavaScript实现自定义输入框的方法,通过点击标签展示输入框并自动获取焦点,同时实现了输入框失去焦点后的隐藏功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先贴图

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值