js----前端添加标签

小咪咪 2022-01-14 04:53 382阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

先来个样式图

![89621f1fdc84ecc66cbbcf684c682f3aac9.jpg][]

html代码如下

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.css" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/jquery.tagsinput.js"></script>
    
    
    <script type="text/javascript">
    
    	$(function() {
    		$('#tags_1').tagsInput({width:'auto'});
    		//初始化赋值
    		$('#tags_1').importTags('张三,李四,王五');
    		$("#getInputValue").click(function(){
    			var tags_value = $("#tags_1").val();
    			console.log(tags_value);
    		});
    	});
    	
    </script>
    </body>
    
    <p><label>标签:</label>
    <input id="tags_1" type="text" class="tags"/></p>
    <button type="button"  id="getInputValue">保存</button>
    </body>
    </html>

最后，我是参考如下插件完成的

http://www.jq22.com/jquery-info19906

转载于:https://my.oschina.net/u/2312022/blog/2963069

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/86886662b9034257923d0ca6147a10d1.png
[89621f1fdc84ecc66cbbcf684c682f3aac9.jpg]: /images/20220114/933336fadd7e4fae8412dfaa78dad5f1.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关使用js设定标签属性，利用循环遍历给标签添加事件

设定标签属性给标签添加属性语法标签对象.setAttribute('属性名称' , 属性值); 一次只能定义一个属性，如果要定义多个属性，要执

ゝ一纸荒年。/ 2023年05月28日 05:26/ 0 赞/ 36 阅读

相关前端meta标签

meta主要用于设置网页的一些元数据，元数据不是给用户看的。 charset用于指定网页的字符集，<meta charset = "utf-8"> name

忘是亡心i/ 2022年08月31日 02:23/ 0 赞/ 285 阅读

相关 js 删除append标签添加的元素

问题情境：通过append添加的元素（标签），每次执行这个js方法时，就会再次拼接，所以要进行判断，如果存在便删除。这个问题本身并不复杂，但是我在写的时候脑袋短路了，$("

ゞ浴缸里的玫瑰/ 2022年08月20日 10:27/ 0 赞/ 1082 阅读

相关添加tab标签

1.xml <TabHost android:layout_width="wrap_content" android:layou

系统管理员/ 2022年08月06日 09:09/ 0 赞/ 278 阅读

相关 JavaScript（二）js 操作 html 标签（添加事件、改变属性、改变标签内容、定时器）

找到页面元素 > 先给标签一个id属性，然后根据id的值查找。 > > document.getElementById("id值"); > > 可以根据标

谁借莪１个温暖的怀抱￠/ 2022年03月28日 14:48/ 0 赞/ 671 阅读

相关 js----前端添加标签

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 先来个样式图 ![89621f1fdc84ecc66c

小咪咪/ 2022年01月14日 04:53/ 0 赞/ 383 阅读

相关 Web前端——表单提交和Js添加选项

表单表单提交表单提交之后会将表单的数据以get或post方式，传送到action要打开的页面方式1：使用提交按钮 <form action=""

淩亂°似流年/ 2021年12月13日 03:09/ 0 赞/ 281 阅读

相关 JS动态添加标签

JS动态添加标签如代码示例，使用jquery，动态的增加标签： function addDiv(serial) { //最外层父di

秒速五厘米/ 2021年10月15日 15:55/ 0 赞/ 723 阅读

相关 JS实现动态添加外部js、css到head标签的方法

本文实例讲述了JS实现动态添加外部`js、css`到`head`标签的方法。 function appendJQCDN() { var head =

ゝ一纸荒年。/ 2021年06月26日 16:06/ 0 赞/ 646 阅读