手机键盘搜索功能

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>