jQuery 点击input框标题收起
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap4.5.min.css" />
<style type="text/css">
.box2 {
position: relative;
width: 300px;
border: 1px solid #ccc;
} .box2 .label {
position: absolute;
left: 20px;
top: 11px;
transition: all 0.3s;
} .box2 .inputs {
padding: 12px 0 12px 80px;
border: none;
/*border-bottom: 1px solid #9E9E9E;*/
width: 100%;
} :focus {
outline: -webkit-focus-ring-color auto 0px;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 0px;
} .box2 .label.label12 {
position: absolute;
left: 5px;
top: 0px;
font-size: 12px;
} .box2 .ins {
padding: 19px 10px 5px !important;
}
/*下拉选*/ .selectes {
position: relative;
width: 500px;
height: 50px;
border: 1px solid #ccc;
padding: 17px 35px 5px 10px;
cursor: pointer;
/*background-color: aliceblue;*/
} .selectTitle {
position: absolute;
font-size: 12px;
left: 5px;
top: 0px;
} .imgs {
width: 20px;
position: absolute;
right: 7px;
top: 15px;
transition: all .6s;
transform: rotate(180deg);
} .imgs2 {
transform: rotate(0deg);
} .option-con>img {
/*width: 60px;*/
height: 18px;
vertical-align: middle;
} .list-option {
border: 1px solid #ccc;
width: 500px;
height: 200px;
overflow: auto;
display: none;
} .list-option ul,
li {
list-style: none;
} .list-option li:hover {
background-color: #dcdcdc;
cursor: pointer;
}
</style>
</head> <body>
<div class="box2 m-5">
<span for="" class="label">姓名</span>
<input type="" class="inputs mochu" name="name2" id="name2" value="" placeholder=""/>
</div> <div class="box2 m-5">
<span for="" class="label">年龄</span>
<input type="" class="inputs mochu" name="name2" id="name2" value="" placeholder=""/>
</div> <div class="selectes mx-5 mt-5" onclick="selects(this)">
<span for="" class="selectTitle text-black-50">物流</span>
<div class="selCon">
<div class="option-con h-100 d-flex justify-content-start align-items-center">
<span class="px-3" name="name2" id="name2" value="">Please choose</span>
</div>
</div>
<img class="imgs" src="img/arrows.png" />
</div>
<div class="mx-5 list-option">
<ul class="p-2 mb-0"></ul>
</div> <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//取获焦点
focuss(); var datas = [{
id: "1",
logistics: "img/mts.jpg",
other: "Hub Brand",
price: "929+"
}, {
id: "2",
logistics: "img/new-ems.jpg",
other: "Spoke Head",
price: "289+"
}, {
id: "3",
logistics: "img/new-tpd.jpg",
other: "Brake System",
price: "869+"
}, {
id: "4",
logistics: "img/fedex.jpg",
other: "Flyweight",
price: "889+"
}, {
id: "5",
logistics: "img/new-ems.jpg",
other: "Center Channel Hole",
price: "909+"
}, {
id: "6",
logistics: "img/mts.jpg",
other: "Rim Warranty",
price: "239+"
}, {
id: "7",
logistics: "img/fedex.jpg",
other: "Standard",
price: "791+"
}, {
id: "8",
logistics: "img/imgList/vehicle1.jpg",
other: "Matte Mango",
price: "1791+"
}, {
id: "9",
logistics: "img/imgList/vehicle2.jpg",
other: "Turquoise",
price: "191+"
}, {
id: "11",
logistics: "img/imgList/vehicle3.jpg",
other: "straight pull",
price: "330+"
}, {
id: "12",
logistics: "img/imgList/vehicle4.jpg",
other: "J-bend",
price: "210+"
}, {
id: "13",
logistics: "img/imgList/vehicle5.jpg",
other: "Center lock",
price: "214+"
}, {
id: "14",
logistics: "img/imgList/vehicle6.jpg",
other: "Industry Nine Hydra",
price: "130+"
}, {
id: "15",
logistics: "img/imgList/vehicle7.jpg",
other: "Chris King ISO AB / ISO B",
price: "1110+"
}, {
id: "16",
logistics: "img/imgList/vehicle8.jpg",
other: "Hope Pro 4",
price: "118+"
}
]
$.each(datas, function(index, item) {
// console.log(item.logistics);
var html = `<li>
<div class="option-con py-1 d-flex justify-content-start align-items-center">
<img class="" src="${item.logistics}" />
<span class="px-3" name="name2" id="name2" value="">${item.other}</span>
<span class="text-black-50" name="name2" id="name2" value="">USD: <span>${item.price}</span></span>
</div>
</li>`;
$(".list-option>ul").append(html);
}) lis();
})
//失去焦点
blurs(); //失去焦点
function blurs() {
$('.inputs').blur(function() {
$(this).prev(".label").removeClass("label12");
$(this).removeClass("ins");
$(this).css('border-color', '#9E9E9E');
});
} //获取焦点
function focuss() {
$('.inputs').focus(function() {
$(this).bind('input propertychange', function() {
if($(this).val().length > 0) {
$(this).css('border-color', 'blue');
$(this).unbind("blur");
} else {
blurs();
$(this).css('border-color', 'red');
}
})
$(this).prev(".label").addClass("label12");
$(this).addClass("ins"); });
} //下拉选
function selects(that) {
//方案一：
//$(".list-option").slideToggle(); //方案二：
if($(".list-option").is(":hidden")){
$(".list-option").slideDown(200);
$(that).find(".imgs").addClass("imgs2");
}else{
$(".list-option").slideUp(200);
$(that).find(".imgs").removeClass("imgs2");
}
} //下拉选内容
function lis() {
$(".list-option>ul").on("click","li",function() {
var selEl = $(this).children().clone();
$(".selCon").html(selEl);
$(".list-option").slideUp(200);
$(".imgs").removeClass("imgs2");
console.log($(this).children().text().replace(/\s*/g, ""));
})
}
</script>
</body> </html>
效果预览：
jQuery 点击input框标题收起的更多相关文章
- jquery点击复选框触发事件给input赋值
体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...
- jquery 点击查看，收起特效
<div class="all"> <p><a href="javascript:;" id="onvk"&g ...
- JQUERY实现点击INPUT使光标移动到最后或指定位置
下面本文章给大家简单介绍一下JQUERY实现点击INPUT使光标移动到最后或指定位置例子,希望对各位有帮助,你要知道面对一个 处女座的 需求者, focus()是远远不够的,比如说“我点进去的时候光标 ...
- JQuery 当点击input后，单选多选的选中状态
1.当点击input元素,此元素的选中checked的值 = 此元素此时表现的选中与否的状态. eg:input元素开始是未选中,点击后表现的是选中状态,此元素的checked为true(和此元素开始 ...
- 解决默写浏览器中点击input输入框时，placeholder的值不消失的方法
html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...
- html5点击input没有出现光标完美解决方案
html5点击input没有出现光标完美解决方案 <pre> <input type="text" placeholder="输入姓名" cl ...
- 一个实例 ---灵活使用jquery选择器实现input一个key，多个value 。 用ajax传递对象到后台控制器
标题可能不是很清晰,我们看实例: 简单来说就是需要实现sku的功能...一件商品可以有多个属性, 一个属性可以有多个值 . 最后以json格式存到数据库 难点一: 如何实现input输入框的弹性使用 ...
- 关于点击input框唤醒键盘导致input被遮盖的问题
关于点击input框唤醒键盘导致input被遮盖的问题 这个问题相信大家在实际开发过程当中都有遇见,我自己也遇见过很多次.之前在百度上看见大多数的方法利用的都是键盘唤醒了之后,页面的实际高度会发生变化 ...
- 点击input时,里面默认字体消失显示
点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...
随机推荐
- Python利用openpyxl带格式统计数据（1）- 处理excel数据
统计数据的随笔写了两篇了,再来一篇,这是第三篇,前面第一篇是用xlwt写excel数据,第二篇是用xlwt写mysql数据.先贴要处理的数据截图: 再贴最终要求的统计格式截图: 第三贴代码: 1 '' ...
- Ubuntu使用Nginx 部署你的静态网页
首先使用Putty 登录填写名称 unbutu 然后获取管理员权限 sudo -i 首先更新APT库sudo apt-get updatesudo apt-get upgrade 安装 git,su ...
- 【命令】ln命令
这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件或目录在另外一个位置建立一个同步的链接,默认是链接是硬链接,常用参数是 "-s" . 对于ln命令,这里 ...
- 160个Crackerme破解
001: 第一个破解: 有两种登陆方式:序列号/名字和序列号,观察报错信息 两个报错信息,直接中文搜索字符: 第一种登陆方式报错为:sorry,xx 右键中文字符搜索,ctrl+f输入要搜索的字符,这 ...
- IaaS、PaaS、SaaS、DaaS都是什么？现在怎么样了？终于有人讲明白了
导读:本文将详细科普云计算的概念.云服务的发展现状,并逐一介绍各种云服务模式(IaaS.PaaS.SaaS.DaaS),建议收藏! 作者:阿里云智能-全球技术服务部来源:大数据DT(ID:bigdat ...
- reactor模式：单线程的reactor模式
reactor模式称之为响应器模式,常用于nio的网络通信框架,其服务架构图如下 不同于传统IO的串行调度方式,NIO把整个服务请求分为五个阶段 read:接收到请求,读取数据 decode:解码数据 ...
- .net通过iTextSharp.pdf操作pdf文件实现查找关键字签字盖章
之前这个事情都CA公司去做的,现在给客户做demo,要模拟一下签字盖章了,我们的业务PDF文件是动态生成的所以没法通过坐标定位,只能通过关键字查找定位了. 之前在网上看了许多通多通过查询关键字,然后图 ...
- 分贝单位的本质（下半篇），dBm、dBFS、dBV的妙处你想象不到
上半篇讲到了声音分贝的概念, 对于声音的单位:dB SPL和dB SIL,有兴趣了解并推算的朋友,可以点击以下链接(PC端效果更佳) http://www.sengpielaudio.com/calc ...
- vue-vite浅析
大家好,我是小雨小雨,致力于分享有趣的.实用的文章. 内容分为原创和翻译,如果有问题,欢迎随时评论或私信,很乐意和大家一起探讨,一起进步. 分享不易,希望能够得到大家的支持和关注. vite出了好久了 ...
- LeetCode844 比较含退格的字符串
题目描述: 给定 S 和 T 两个字符串,当它们分别被输入到空白的文本编辑器后,判断二者是否相等,并返回结果. # 代表退格字符. 示例 1: 输入:S = "ab#c", T = ...