当前位置:主页 > JavsScript库 > 表单 >

javascript中的标签编辑器 - Tagger
栏目分类:表单   发布日期:2021-08-28   浏览次数:

Tagger 是一个小型但功能齐全的 JavaScript 标记系统,它使用户能够将标记插入到输入字段中。

使用:

1. 要使用标记系统,请将标记器的 JavaScript 和样式表放在 HTML 文档中。

<link href="tagger.css" rel="stylesheet">
<script src="tagger.js"></script>

2. 为标签系统创建一个普通的输入字段。

<input type="text" name="tags" />

3. 在输入字段上初始化 Tagger 并完成。

tagger(document.querySelector('[name="tags"]'));

4. 确定标签中是否允许有空格。默认值:true。

tagger(document.querySelector('[name="tags"]'), {
  allow_spaces: true
});

5. 确定是否允许重复标签。默认值:false

tagger(document.querySelector('[name="tags"]'), {
  allow_duplicates: false
});

6. 指定href属性中应包含的内容。默认值:false

tagger(document.querySelector('[name="tags"]'), {
  link: function(name) {
    return `javascript:alert('${name}');`;
  }
});

7. 确定是否在蓝色上添加标签。默认值:false。

tagger(document.querySelector('[name="tags"]'), {
  add_on_blur: false
});

8. 指定允许插入的最大标签数。默认值:-1。

tagger(document.querySelector('[name="tags"]'), {
  tag_limit: 10
});

9. 向标签输入添加自动完成列表。

tagger(document.querySelector('[name="tags"]'), {
  completion: {
    list: ['html365', 'cn'],
    delay: 400,
    min_length: 2
  }
});

10. 以编程方式添加/删除标签。

instance.add_tag('example')
instance.remove_tag('example')



官方网站:https://github.com/jcubic/tagger

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库