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定義的也不多修改起來應該不是很困難