用JQuery实现标签添加

一时失言乱红尘 2022-04-16 05:56 485阅读 0赞

<label for="tag" style="font-size:20px;">标签</label>
    <input id="tag" type="text" name="tag" class="form-control" placeholder="输入关键词，单击回车添加标签"/>
    <div class="col-sm-12 question-tag" style="min-height:60px;">
    	<ul id="tag-ul" class="clearfix" style="margin:0;padding-left:5px;">
    	</ul>
    </div>

question.js代码

$(function(){
        /*标签添加验证*/
    	$("#tag").keydown(function(event){
    		var tag=$("#tag").val();
    		var tagAdd="<li class='alert alert-success alert-dismissible'><span class='tag-name'>"+tag+"</span><button type='button' class='close' data-dismiss='alert' style='position: relative;padding:0;'>×</button></li>";
    		var test=1;
    		if(event.keyCode==13){
    			if(tag==""){}
    			else{
    				$(".tag-name").each(function(){
    					if(tag==$(this).text()){
    						test=0;
    					}
    				})
    				if(test==1){
    					if($("#tag-ul").children("li").length<5){
    						$(".tag-alert").remove();
    						$("#tag-ul").append(tagAdd);
    						$("#tag").val("");
    					}
    					else{
    						$(".tag-alert").remove();
    						var alert="<span class='tag-alert'>最多添加五个标签</span>";
    						$(".question-tag").append(alert);
    					}
    				}
    				else{
    					$(".tag-alert").remove();
    					var alert="<span class='tag-alert'>您已经添加过该标签，请输入其他标签。</span>";
    					$(".question-tag").append(alert);
    				}
    			}
    		}
    	})
    })

原理很简单，获取键盘事件，如果是回车将文本框里的内容加入到列表中，并加入一些必要的检验就行了，CSS修饰的代码这里不给出，只是样子，自己做就行

发表评论取消回复

表情：

评论列表（有 0 条评论，485人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现动态添加标签页

js实现动态添加标签页，能够进行标签的添加，删除，修改，内容切换源码： addTab.html <!DOCTYPE html> <html lan

男娘i/ 2023年07月08日 12:29/ 0 赞/ 5 阅读

相关 jquery实现添加删除表格

css: <style> div { width: 500px; line-h

谁借莪１个温暖的怀抱￠/ 2022年09月14日 09:49/ 0 赞/ 211 阅读

相关 jQuery添加生成标签自动筛选插件

[下载地址][Link 1]jQuery标签添加筛选代码，jQuery标签插件制作input框输入文字筛选标签点击添加效果。 ![1630270033.png][]

迷南。/ 2022年09月09日 06:14/ 0 赞/ 141 阅读

相关用jQuery给表格添加样式

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></

╰+攻爆jí腚メ/ 2022年07月28日 00:20/ 0 赞/ 226 阅读

相关 jQuery动态添加li标签并添加属性和绑定事件

代码如下： <%@page import="java.util.ArrayList"%> <%@ page language="java" contentTy

清疚/ 2022年06月15日 02:27/ 0 赞/ 211 阅读

相关 jQuery动态添加li标签并添加属性和绑定事件

代码如下： <%@page import="java.util.ArrayList"%> <%@ page language="java" contentTy

喜欢ヅ旅行/ 2022年06月15日 02:27/ 0 赞/ 489 阅读

相关 jQuery -- 通过ajax在jsp内添加标签

挺详细的转载博客园：我的前端之路 [http://www.cnblogs.com/wanghuih/p/5755932.html][http_www.cnblogs

柔情只为你懂/ 2022年06月07日 12:35/ 0 赞/ 164 阅读

相关 JQuery实现动态添加的标签元素的点击事件

这里所说的动态添加的元素的意思是：用js添加的标签元素先说一下我遇到的问题：想对一些数据实现分页，就自己写一个分页功能。用的是bootstrap的分页，在页面获取数据列

小鱼儿/ 2022年05月25日 06:20/ 0 赞/ 309 阅读

相关用JQuery实现标签添加

<label for="tag" style="font-size:20px;">标签</label> <input id="tag" type="text"

一时失言乱红尘/ 2022年04月16日 05:56/ 0 赞/ 486 阅读

相关 jQuery添加标签元素/内容

通过 `jQuery`，可以很容易地添加新元素/内容。我们将学习用于添加新内容的四个 jQuery 方法： `append()` \- 在被选元素的结尾插入内容

r囧r小猫/ 2021年06月26日 16:06/ 0 赞/ 573 阅读