1.css
* {
margin: 0;
padding: 0;
}
.centerinput {
width: 100%;
height: 2.95rem;
background-color: #f6f6f6;
padding-top: 0.6rem;
position: relative;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.centerinput-wrap {
width: 17.6rem;
height: 1.75rem;
left: 50%;
margin-left: -8.8rem;
background-color: #fff;
border-radius: 1.75rem;
-webkit-border-radius: 1.75rem;
padding: 0 0.65rem 0 0.65rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
display: flex;
}
.searchbtn {
display: block;
width: 1.2rem;
height: 1.75rem;
float: left;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAdVBMVEUAAACKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqQ3xhgAAAAJnRSTlMA+/WPUeTVDwPxqWE0LAvPyaVZ69yxmXtUFQeghoFza0tBk2fDI6LKcX4AAAEASURBVCjPhZHXdoNADAW30DsGjHEDx8n8/ycGstjUHM+LBIO4WhAjbhiUiiLTD0+sSK4+L5zT0kXlcFO3z/vFBip35joFeWx6z3LAaaY5hd9Nj541ZMkrz8aPFik1fI3tFSyxJECaFFdRiRWNT/DXhBCJNRrpmlc4YkM8RpUcxRaf21AU9x2ZmhHJc0d+kw+loN6RjjlpRr515zFMY3sb+YBorNZG5uOE55CuR2PJzXQWpptIUgr3/ZkJF9tUsyQ3hWvydj8ZyGmNpr8s28bEaQW9Pc1+vgSZBnllA7YVyrkV8UVhsOt+l8Ee5it29fGo28gca263HD5ZX/zLqbj8AqJ4F0crlvuAAAAAAElFTkSuQmCC);
cursor: pointer;
background-size: 0.7rem 0.7rem;
background-repeat: no-repeat;
background-position: left center;
}
.centerinput-int {
width: 15rem;
height: 1.75rem;
padding-top: 0.5rem;
padding-bottom: 0.475rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#text {
display: block;
width: 100%;
height: 100%;
border: none;
}
2.html
<div class="centerinput">
<!--第一步:HTML布局部分①②③-->
<div class="centerinput-wrap rea top24 flex">
<!--搜索框前的放大镜(点击可执行搜索功能)-->
<em class="searchbtn"></em>
<div class="centerinput-int">
<!--①注意form表单标签必须有;②action必须有-->
<form action="" id="form">
<!--③type类型必须为search-->
<input type="search" name="text" id="text" placeholder="输入美食关键词" />
</form>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var shvalue='';
//第二步:JS部分①②③
/**点击放大镜实现搜索功能**/
$(".searchbtn").on("click",function(e){
shvalue=$("#text").val();
//请求数据
//loadingContent();
});
/**改变**/
$("#form").submit(function(){
//①点击时执行放大镜的搜索函数
$(".searchbtn").click();
//②点击软键盘上的搜索,input框失去焦点(此步骤是实现让软键盘收起;如果不失焦则软键盘不收起)
document.activeElement.blur();
return false;
});
/**失去焦点获取input框里的值**/
$("#text").on("blur",function(){
//③当失去焦点时重新获取一下input框里的值
//(方便用户点击select之后再把input里的东西删除干净,此时input里的值就不存在了,所以向后台穿的value也必须是空的)
shvalue=$("#text").val();
});
</script>