<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="Font/demo-files/demo.css"/>
<style>
/*1.此处应我的项目需要，加了些特别的设置，如字体、背景色等，按需添加；
2.内层input不加边框，看起来效果会自然一点，所以外层div设置了边框和圆角*/
.box{
margin: 50px auto;
background-color: #ffffff;
border: 1px solid #eeeeee;
border-radius: 6px;
font-size: 0.52rem;
text-align: center;
color: #d2d2d2;
}
/*label标签样式 放在.box下，不至于影响其他的label
采取绝对定位，位置根据需求确定*/
.box label{
z-index: 2;
position: absolute;
left: 15%;
margin-left: -8%;
color: #B2B2B2;
top: 4.8rem;
font-weight: normal;
}
/**
*input标签样式
*宽度适应外层div
*隐藏边框
*这里有个小技巧，height与line-height值相等，可保证文字垂直居中；但我发现文字比图标略偏下，进行了微调；
*/
.box input{
text-indent: 10px;
height: 2.04rem;
line-height: 2.04rem;
width: 100%;
border: none;
outline: none;
}
/**
*图标样式
*绝对定位，自定义颜色
*/
.box i{
position: absolute;
top: 4.8rem;
left: 5%;
/*margin-left: -15%;*/
color: #B2B2B2;
}
</style>//具体样式自行按照情况调节
</head>
<body>
<div class="box">
<label for="q" id="q_label">请输入关键字</label>
<input id="q" type="text">
<i class="icon icon-search" id="q_i"></i>
</div>
<script src="js/libs/jquery.3.1.1.js"></script>
<script>
// js判断input输入框中是否有值，以此来判断是否隐藏默认提示信息
//使用keyup事件
$(function() {
$(‘#q‘).on(‘keyup‘,function() {
var len = document.getElementById(‘q‘).value;
if(len == ‘‘){
$(‘#q_label‘).show();
$(‘#q_i‘).show();
}else{
$(‘#q_label‘).hide();
$(‘#q_i‘).hide();
}
});
})
</script>
</body>
</html>
再做项目的时候经常遇到的问题，以前只是做静态页面，现在要加效果了，所以百度了一下，觉得特别有帮助到我。所以跟你们分享一下
时间： 2024-10-17 00:08:55