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

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

先看一下效果图：

前端代码

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

js代码

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

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


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

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

这样就没有冲突了

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