Jquery 文章关键字添加代码

最新推荐文章于 2021-08-09 20:05:10 发布

alleni123

最新推荐文章于 2021-08-09 20:05:10 发布

阅读量305

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/alleni123/article/details/84517395

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

放这里以后做参考。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<!-- 视频62_文章管理_11 文章添加的关键字的简易实现 -->
<head>
<base href="<%=basePath%>">
<script type="text/javascript"
	src="<%=path%>/resources/js/jquery-1.9.0.js"></script>

<title>My JSP 'add.jsp' starting page</title>

<style type="text/css">
#keyword-container {
	border: 1px solid #bbb;
	width: 700px;
}

#keyword-input {
	border: none;
	width: 300px;
	color: #aaa;
	height: 28px;
}

div .keyword-in {
	float: left;
	font-size: 12px;
	margin: 0 3px;
	background: #3fa7cb;
	padding: 3px;
	color: #fff;
}

a.keyword-shut:link,a.keyword-shut:visited {
	color: #fff;
	text-decoration: none;
}

a.keyword-shut:hover {
	color: #ff0;
}
</style>

<script type="text/javascript">
	$(function() {

		var num=5;


		$("#keyword-input").focus(function() {
			$(this).val("");
		});

		$("#keyword-input").blur(function() {
			console.log($(this).val().length);
			if ($(this).val().length == 0) {
				$(this).val("请输入关键字，通过逗号或者回车确认");
			}
		});

		$("#keyword-input").keyup(function(event) {
			var code = event.keyCode;
			var add=true;
			if (code == 188 || code == 13) {
				//c是要添加的关键字
				var c = $(this).val();

				if (c != "") {
					if ($(".keyword-in").length >= num) {
						alert("最多只能添加" + num + "个关键字");
						event.preventDefault();
						return;
					}

					 var addedkeys=$("input[name='added_keywords']");
					 console.log(addedkeys);
				/*	$("input[name='added_keywords']").each(function(){
						console.log($(this).val());
						if($(this).val()==c){
							alert("关键字已经存在");
							event.preventDefault();

						}else{
							add=true;
						}
					});*/
					var aks=$("input[name='added_keywords']");
					for(var i=0;i<aks.length;i++){
						console.log(aks[i]);
						if(aks[i].value==c){
							alert("关键字已经存在");
							add=false;
							return false;
						}
					}



					if(add){
					var ki = createKeyword(c);
					$("#keywords-wrap").append(ki);
					$(this).val("");}
				}
			}
		});

		//36分钟
		$("#keywords-wrap").on("click", "a.keyword-shut", function() {
			$(this).parent(".keyword-in").remove();
			event.preventDefault();
		});

		$(".keyword-shut").click(function() {

		});

	});

	//创建关键字
	function createKeyword(val) {
		return "<div class='keyword-in'><span>"
				+ val
				+ "</span><a href='add.jsp#' class='keyword-shut'> X</a>"
				+"<input type='hidden' name='added_keywords' value='"+val+"'/></div>";
	}
</script>

</head>

<body>
	<div id="keyword-container">

		<div id="keywords-wrap">
			<div class="keyword-in">
				<span>我的电脑</span> <a href="add.jsp#" class="keyword-shut">X</a>
				<input type='hidden' name='added_keywords' value='我的电脑'/>
			</div>

			<div class="keyword-in">
				<span>我的电脑</span> <a href="add.jsp#" class="keyword-shut">X</a>
				<input type='hidden' name='added_keywords' value='我的电脑'/>
			</div>

		</div>

		<input type="text" id="keyword-input" value="请输入关键字，通过逗号或者回车确认"/>
	</div>
</body>
</html>

alleni123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 文章关键字添加代码

放这里以后做参考。[code="jsp"]My JSP 'add.jsp' starting page#keyword-container { border: 1px solid #bbb; width: 700px;}#keyword-input { border: none; width: 300px;...
复制链接

扫一扫

专栏目录