jQuery手机端搜索框删除文字代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机端搜索框删除文字代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>jQuery手机端搜索框删除文字代码</title>
<link rel="stylesheet" type="text/css" href="css/search.css">
</head>
<body>

<div class="container">

	<div class="search">
		<span class="s_con"><input type="text" class="content" placeholder="请输入搜索内容"><i class="clear"></i></span>
		<span class="s_btn">搜索</span>
	</div>
	
	<div class="list">
		<ul>
			<li>最新发布</li>
			<li>最多收藏</li>
			<li>最多评论</li>
			<li>最多下载</li>
			<li>兼容IE8</li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript">
$('.content').on('keyup',function(){
	$('.clear').show();
});
$('.clear').click(function(){
	$('.content').val('');
});
</script>
</body>
</html>

CSS代码(search.css):

*{margin:0px;padding:0px;list-style:none;}
.container{width:100%;height:800px;margin:0px auto;}
.search{border:1px solid #f4f4f4;position:fixed;top:0px;left:0px;width:100%;height:40px;}
.s_con{position:relative;float:left;display:block;width:80%;height:40px;}
.s_con input{display:inline-block;border:0px;width:100%;height:40px;line-height:40px;padding-left:10px;}
.s_con .clear{display:none;position:absolute;right:0px;top:6px;content:"";width:25px;height:25px;background-image:url('../images/del.svg');background-size:25px 25px;cursor:pointer;}
.s_btn{float:left;display:block;background-color:#009DFF;width:20%;height:40px;line-height:40px;color:#fff;font-size:13px;text-align:center;cursor:pointer;}
.list{margin:50px auto;width:96%;height:auto;border-radius:5px;border:1px solid #f4f4f4;}
.list ul li{border-bottom:1px solid #f4f4f4;width:96%;height:40px;line-height:40px;text-align:left;color:#000;font-size:13px;padding-left:10px;}

附件:下载该文件资源,减少时间成本(增值服务)