演示网站 input标签生成tag插件
tags-input是很小的JavaScript插件,将常规的输入字段转换为标签，可以在input里生成标签和删除操作。
|
1
2
3
|
var instance = new TagsInput({ selector: 'example'}); |
默认加载
|
1
|
instance.addData(['HTML' , 'JavaScript' , 'CSS']) |
最大个数
|
1
2
3
|
var instance = new TagsInput({ max : 10}); |
检测是否重复
|
1
2
3
|
var instance = new TagsInput({ duplicate : true}); |
编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>input标签生成tag插件</title>
<link rel="stylesheet" href="tags-input.css">
<style>
body {
font-family: 'Quicksand', sans-serif;
min-height: 100vh;
background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
}
h1 {
font-size: 1.25em;
margin-bottom: 100px;
}
.container {
margin: 150px auto;
max-width: 950px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="tag-input1">
<script src="tags-input.js"></script>
<script>
var tagInput1 = new TagsInput({
selector: 'tag-input1',
duplicate: false,
max: 10
});
tagInput1.addData(['bootstrap', 'mb', '.com'])
</script>
</div>
<!--下面是无用代码-->
<div style="display:none">
<a href="https://www.smareoweoum.cn/">更多前端代码</a>
</div>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
