放这里以后做参考。
<%@ 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>
分享到：
相关推荐
开始技术部门打算在后台添加或者修改文章的时候，把文章里面的关键字替换为... 当用户添加，删除，更新关键字的时候，在后台生成一个js文件，格式如下： 代码如下: var wordlinkdata='[{“WordLinkAlias”:”wordlinkR
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码，需要的朋友可以参考下。
想必大家对于jQuery这个流行的javascript类库都不陌生，而且只要是前端开发人员肯定或多或少的使用或者接触过，在的这篇文章中，我们将介绍一些书写高质量jQuery代码的原则，我们不单单会告诉你如何去书写，也会告诉...
完美的基础SEO优化、首页关键字和描述自定义、文章关键字和描述的自定义 速度优化： 图片和头像lazyload按需异步加载提速、JS文件托管、jQuery可选底部加载 会员中心： 找回密码、登录、注册、找回密码 2种列表模式...
广告位:首页3个、文章页3个，可设置各种广告自定义代码或联盟代码 自定义CSS样式:添加自己的css样式 自定义头部和底部代码:添加自己的头尾代码，如广告联盟等 网站统计代码:说多了等于扯淡 WordPress主题：XIU...
文章关键字和描述的自定义：在编辑文章的时候你会发现 直达链接：在列表页和文章页都有展示，你可以选择开启、是否新窗口打开、是否需要加nofollow，甚至修改”直达链接“这几个字为你想要的； 列表无限加载：可以...
文章关键字和描述的自定义：在编辑文章的时候你会发现 直达链接：在列表页和文章页都有展示，你可以选择开启、是否新窗口打开、是否需要加nofollow，甚至修改”直达链接“这几个字为你想要的; 列表无限加载：...
4.[纠正]纠正外部调用代码对采用外部链接的文章路径没法显示正确 2013年10月23日 V2.81更新包 1.[新增]文章管理 增加 复制 按钮，免去写形似文章的工作量，直接在现有的修改下即可成新文章 2.[改进]网站参数设置 ...
WordPress 精约新闻自媒体主题 ...主题对SEO已经做了极大的优化，文章、分类和页面添加了自定义标题、关键字与描述SEO选项。假如您觉得还不够用，可在后台主题选项——SEO中可封闭SEO设置，装置自己喜爱的SEO插件。
广告位:首页3个、文章页3个，可设置各种广告自定义代码或联盟代码 自定义CSS样式:添加自己的css样式 自定义头部和底部代码:添加自己的头尾代码，如广告联盟等 网站统计代码:说多了等于扯淡 安装使用： WordPress...
内置多个常用广告位，支持上传图片或者直接添加广告代码 内置 TimThumb 截图功能，可自由设置 内置 百度站内搜索 设置，如果你申请开通了，就可以直接设置 8 个 jQuery CDN加速随意切换 支持导出和导入主题的设置...
广告位:首页3个、文章页3个，可设置各种广告自定义代码或联盟代码 自定义CSS样式:添加自己的css样式 自定义头部和底部代码:添加自己的头尾代码，如广告联盟等 网站统计代码:说多了等于扯淡 安装使用： WordPress...
新增头部搜索：导航在顶部时新增广告位：分类页、标签页、搜索页新增头部自定义广告位分享按钮全扁平化：分享按钮全扁平化，增加10+按钮，帅的一塌糊涂移动端搜索：导航在顶部时，移动端增加搜索功能文章关键字和...
1、基于ThinkPHP,Jquery,Dwz框架开发而来，完全遵循MVC开发思想，代码精炼规范，系统安全性高，运行效率高。 2、应用中心模块完全基于插件形式设计，可以自由移除，添加模块而不影响到其它模块。 2、程序，设计，...
内链功能（管理内链关键字，和设置关键字，达到seo的效果）7.幻灯图片管理完美整合网上流行的27种幻灯样式，后台一键切换。标题可设置显示和隐藏 ，图片大小，切换时间等等。8.新闻频道：采用三级频道分类。可设置...
1、基于ThinkPHP,Jquery,Dwz框架开发而来，完全遵循MVC开发思想，代码精炼规范，系统安全性高，运行效率高。 2、应用中心模块完全基于插件形式设计，可以自由移除，添加模块而不影响到其它模块。 2、程序，设计，...
6.内链功能（管理内链关键字，和设置关键字，达到seo的效果） 7.幻灯图片管理完美整合网上流行的27种幻灯样式，后台一键切换。标题可设置显示和隐藏 ，图片大小，切换时间等等。 8.新闻频道：采用三级频道分类。可...
6.内链功能（管理内链关键字，和设置关键字，达到seo的效果） 7.幻灯图片管理完美整合网上流行的27种幻灯样式，后台一键切换。标题可设置显示和隐藏 ，图片大小，切换时间等等。 8.新闻频道：采用三级频道分类。可...
6.内链功能（管理内链关键字，和设置关键字，达到seo的效果） 7.幻灯图片管理完美整合网上流行的27种幻灯样式，后台一键切换。标题可设置显示和隐藏 ，图片大小，切换时间等等。 8.新闻频道：采用三级频道分类。可...