layui第三方组件 inputTags 标签输入框

官网入口：https://fly.layui.com/extend/inputTags/

先看一下效果图：

前端代码

1 <div class="tags" id="tag">
2     <input type="text" name="" id="inputTags" placeholder="回车生成标签" autocomplete="off">
3 </div>

js代码

 1     layui.config({
 2             base: 'admin/js/', //inputTags.js存放的文件位置
 3         }).use(['inputTags'], function() {
 4             var inputTags = layui.inputTags;
 5             inputTags.render({
 6                 elem: '#inputTags', //定义输入框input对象
 7                 content: ['标签一'], //默认标签
 8                 aldaBtn: false, //是否开启获取所有数据的按钮
 9                 done: function(value) { //回车后的回调
10                     console.log("刚刚输入标签===="+value)
11                 }
12             })
13       });

inputTags.js文件在官网上可以下载


#注意1  这里我遇到一个问题，输入框按回车生成标签的时候与layui表单有点冲突； 编辑layui表单是时候按回车键会自动提交表单，或者检查表单中设置的required属性；
解决办法是 我在js文件中将（layui）回车事件取消了

1  $(document).keyup(function(event){
2        return false;
3  });

这样就没有冲突了

#注意2  我的表单中需要2个标签输入框， js创建input标签时传不同的id， 但是css就不能共用了 ，  css是id定义的  我对css不是太懂 为了方便就复制了一份id重新定义了一下，  你也可以修改原来的css文件，css定义的也不多修改起来应该不是很困难