前端代码+jquery实现类似于关键字添加的实例

最新推荐文章于 2022-09-21 19:39:13 发布

uestc_lxp

最新推荐文章于 2022-09-21 19:39:13 发布

阅读量558

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/uestc_lxp/article/details/46276523

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

（1）实现内容：输入框中，当用户输入关键字时，会自动在输入框上面呈现，这是一种动态的方式，并且用户点击删除按钮时，是可以进行删除操作的，这里用的的技术有css+jquery+js的事件委派

（2）代码实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		var num = 5;
		$("#keyword-input").focus(function() {
			$(this).val("");
		});
		$("#keyword-input").blur(function() {
			$(this).val("请输入关键字，通过逗号或者回车确认");
		});
		$("#keyword-input").keyup(function(event) {
			var code = event.keyCode;
			if(code==188||code==13) {
				var c = $(this).val();
				if(c!="") {
					if($(".keyword-in").length>=num) {
						alert("最多只能允许添加"+num+"个关键字");
						event.preventDefault();
						return;
					}
					
					/*主要是用来对输入的内容进行获取，判断是否有重复输入，如果有重复输入则不显示*/
					var aks = $("input[name='aks']");
					for(var i=0;i<aks.length;i++) {
						if($(aks[i]).val()==c); {//$(aks[i]) DOM对象
							alert("不能添加重复关键字");
							event.preventDefault();
							return;
						}
					}
					
					/*主要是用来对输入的内容进行获取，判断是否有重复输入，如果有重复输入则不显示*/
			/*		$("input[name='aks']").each(function() {
						//alert($(this).val());
						if($(this).val()==c); {
							alert("不能添加重复关键字");
							event.preventDefault();//本实例阻止不起作用，因为在闭包中
							return;
						}
					});
					*/
					var ki = createKeyword(c);
					$("#keywords-wrap").append(ki);
					$(this).val("");
				}
			}
		});
	/*	
		//此处为什么不使用.keyword-shut?因为直接操作<a></a>对上面动态新加入的html不会起作用，只对原有写死的有效果。所以需要使用js的事件委派on或off
		$(".keyword-shut").click(function() {
		})*/
		$("#keywords-wrap").on("click","a.keyword-shut",function(event) {//on参数，第一个是事件，第二个是选择器，也就是在keywords-wrap上委派一个click事件，委派给keyword-shut
//			alert(event.type);
			$(this).parent("div.keyword-in").remove();
			//return false;这种截止可以，或者使用event.preventDefault();
			event.preventDefault();
		});
		function createKeyword(val) {
			return "<div class='keyword-in'><span>"+val
			+"</span><a href='#' class='keyword-shut'>×</a><input type='hidden' name='aks' value='"+val+"'></div>";
		}
	})
</script>
<style type="text/css">
	#keyword-container {
		border:1px solid #bbb;
		width:300px;
	}
	#keyword-input {
		border:none;
		width:300px;
		color:#aaa;
		height:28px;
		line-height:30px;
	}
	div.keyword-in {
		float:left;
		font-size:12px;
		margin:3 3px;
		background:#3fa7cb;
		padding:3px;
		color:#fff;
	}
	
	a.keyword-shut:link,a.keyword-shut:visited {
		margin-left:3px;
		color:#fff;
		text-decoration:none;
	}
	a.keyword-shut:hover {
		color:#732;
	}
</style>
</head>
<body>
	<div id="keyword-container">
		<div id="keywords-wrap">
		<!-- 注释部分是用来测试的 -->
<!-- 			<div class="keyword-in">
				<span>我的电脑1</span>
				<a href="#" class="keyword-shut">×</a>
				<input type="hidden" name="aks" value="我的电脑1"/>
			</div>
			<div class="keyword-in">
				<span>我的电脑2</span>
				<a href="#" class="keyword-shut">×</a>
				<input type="hidden" name="aks" value="我的电脑2"/>
			</div>
			<div class="keyword-in">
				<span>我的电脑3</span>
				<a href="#" class="keyword-shut">×</a>
				<input type="hidden" name="aks" value="我的电脑3"/>
			</div>-->
		</div>
		<input type="text" id="keyword-input" value="请输入关键字，通过逗号或者回车确认">
	</div>
</body>
</html>

（3）效果图：

uestc_lxp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端代码+jquery实现类似于关键字添加的实例

（1）实现内容：输入框中，当用户输入关键字时，会自动在输入框上面呈现，这是一种动态的方式，并且用户点击删除按钮时，是可以进行删除操作的，这里用的的技术有css+jquery+js的事件委派（2）代码实现<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
复制链接

扫一扫

专栏目录