一个前端小插件，没有技术含量，只是方便以后复制粘贴。
效果就是：
1、输入框聚焦时，缩短宽度，添加阴影；
2、点击取消按钮时，清空输入框内容；
3、除了父区域和自身，点击其他区域时，输入框恢复原来宽度；
4、美化且不贴边的滚动条；
5、监听键盘输入并且延时异步获取数据；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#myBox{width: 400px;height: 600px;background-color: #ddd;position: relative;overflow-y: auto;overflow-x: hidden;}
#myBox::-webkit-scrollbar {width: 20px;height: 0px;}
#myBox::-webkit-scrollbar-thumb {border-radius: 12px;border: 6px solid rgba(0, 0, 0, 0);box-shadow: 8px 0 0 #A5ADB7 inset;}
#myBox::-webkit-scrollbar-thumb:hover {box-shadow: 8px 0 0 #4A4A4A inset;}
#myBox p{width: auto;height: 80px;display: block;position: relative;}
#myBox span{text-align: center;font-size: 12px;}
#myInput{
font-family: PingFangSC-Medium;
width: 280px;
height: 30px;
line-height: 30px;
text-indent: 10px;
display: block;
margin: auto;
position: absolute;
z-index: 1;
letter-spacing: 1px;
left: 50px;
font-size: 12px;
top: 0;
bottom: 0;
outline: none;
border: none;
border: 1px solid #DADCE6;
border-radius: 4px;
color: #A8AAB4;
transition: ease all .3s;
}
#mySpan{
font-family: PingFangSC-Medium;
width: 38px;
height: 18px;
text-align: center;
position: absolute;
z-index: 0;
display: inline-block;
top: 30px;
right: 55px;
font-size: 14px;
font-weight: normal;
color: #2B78F9;
line-height: 18px;
cursor: pointer;
}
#SearchResult{
width: 100%;
height:800px;
font-size: 12px;
text-align: center;
background-color: #aaa;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="myBox">
<p>
<input id="myInput" type="text" placeholder="请输入内容...">
<span id="mySpan">取消</span>
</p>
<div id="SearchResult">搜索结果区域...</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var myInput = document.getElementById("myInput");
var mySpan = document.getElementById("mySpan");
var SearchResult = document.getElementById("SearchResult");
// 输入框聚焦时，缩短宽度，添加阴影
myInput.onfocus = function () {
myInput.style.transition = "all .3s";
myInput.style.width = "230px";
myInput.style.boxShadow = "inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(43,120,249,0.6)";
myInput.style.borderColor = "#66afe9"
}
// 点击按钮时，清空输入框内容
mySpan.onclick = function () {
myInput.value = "";
}
// 除了父区域和自身，点击其他区域时，输入框恢复原来宽度
document.body.onclick = function(ev){
// 事件源，在IE6,7,8下也有问题， ev.target 在IE6,7,8下是 undefined
// 在IE6,7,8下不是用ev.target来获取事件源的，只能用ev.srcElement
// 对于其他浏览器，如果ev.target存在，就用这个值，否则就用ev.srcElement
ev = ev || window.event;
target = ev.target || ev.srcElement;
if (target == myInput || SearchResult.contains(target)) {
myInput.style.transition = "all .3s";
myInput.style.width = "230px";
myInput.style.boxShadow = "inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(43,120,249,0.6)";
myInput.style.borderColor = "#66afe9";
}else{
myInput.style.transition = "all .3s";
myInput.style.width = "280px";
myInput.style.boxShadow = "none";
myInput.style.borderColor = "#DADCE6";
}
}
/*----监听键盘输入并且延时异步获取数据----*/
var keyUpTimer = null;
function keyUp(e) {
if (keyUpTimer) {
clearTimeout(keyUpTimer);
}
keyUpTimer = setTimeout(function () {
// Search(myInput.value);
var rs = $('<span class="rs">' + myInput.value + '</span>');
rs.appendTo(SearchResult);
},800);
}
// 调用keyUp方法
myInput.onkeyup = keyUp;
/*----/ 监听键盘输入并且延时异步获取数据----*/
})
</script>
</body>
</html>
<!--支付-->
<div class="card" style="width: 600px;height: 600px;box-shadow: 0 10px 30px 0 rgba(0,0,0,.1);display: none;background-color: #fff;transition: ease .3s;border-radius: 5px;position: fixed;top: 50px;bottom: 0;left: 0;right: 0;margin: auto;">
<div style="width: 100%;height: 100%;position: absolute;">
<span class="close fa fa-times" style="position: absolute;font-size: 20px;right: 5px;top: 5px;padding: 5px;text-align: center;border-radius: 5px;cursor: pointer;width: 30px;height: 30px;transform: scale(1.2,1);">x</span>
<div class="card-body">
<div class="form-horizontal form-material">
<div class="form-group" style="text-align: center;margin-top: 100px;">
<img src="/static/home/img/pay.png" width="300" height="300">
</div>
<div class="form-group">
<div class="col-sm-12">
<input class="btn btn-success" style="width: 300px;margin: 20px auto;display: block;background: -webkit-linear-gradient(left, #e67d4b, #f8324b);border: none;color: #fff!important;height: 40px;cursor: pointer;border-radius: 8px;transition: ease .3s;" type="submit" value="支付完成"/>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".submit").click(function () {
$(".card").fadeIn(100);
$(".card").css("cssText","width: 600px;height: 600px;background-color: #fff;transition: ease .3s;box-shadow: 0 10px 30px 0 rgba(0,0,0,.1);border-radius: 5px;position: fixed;top: 0;bottom: 0;left: 0;right: 0;margin: auto;");
});
$(".close").click(function () {
$(".card").fadeOut(100);
$(".card").css("cssText","width: 600px;height: 600px;background-color: #fff;transition: ease .3s;box-shadow: 0 10px 30px 0 rgba(0,0,0,.1);border-radius: 5px;position: fixed;top: 50px;bottom: 0;left: 0;right: 0;margin: auto;");
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151184.html
