layui标签输入框inputTags介绍

互联网 20-2-7

layui框架是一款采用自身模块规范编写的前端UI框架，门槛极低，拿来即用。本文为大家介绍了一种layui框架中使用的标签输入框inputTags，希望对大家有一定的帮助。

layui标签输入框inputTags样式：

目录结构：

页面代码：

<!DOCTYPE html> <html>  	<head> 		<meta charset="UTF-8"> 		<title>inputTags</title> 		<link rel="stylesheet" href="plugins/layui/css/layui.css" />  	</head>  	<body> 		<div class="tags" id="tags"> 			<input type="text" name="" id="inputTags" placeholder="回车生成标签" autocomplete="off"> 		</div> 	</body>  </html> <script type="text/javascript" src="plugins/layui/layui.js"></script> <script> 	layui.config({ 		base: 'js/', 	}).use(['inputTags'], function() { 		var inputTags = layui.inputTags; 		inputTags.render({ 			elem: '#inputTags', //定义输入框input对象 			content: [], //默认标签 			aldaBtn: true, //是否开启获取所有数据的按钮 			done: function(value) { //回车后的回调 				console.log("刚刚输入标签===="+value) 			} 		}) 	}) </script>

**inputTags.js**

/* * @Author: layui-2 * @Date:   2018-08-31 11:40:42 * @Last Modified by:   layui-2 * @Last Modified time: 2018-09-04 14:44:38 */ layui.define(['jquery','layer'],function(exports){   "use strict";   var $ = layui.jquery,layer = layui.layer       //外部接口   ,inputTags = {     config: {}      //设置全局项     ,set: function(options){       var that = this;       that.config = $.extend({}, that.config, options);       return that;     }      // 事件监听     ,on: function(events, callback){       return layui.onevent.call(this, MOD_NAME, events, callback)     }        }     //操作当前实例   ,thisinputTags = function(){     var that = this     ,options = that.config;      return {       config: options     }   }    //字符常量   ,MOD_NAME = 'inputTags'     // 构造器   ,Class = function(options){     var that = this;     that.config = $.extend({}, that.config, inputTags.config, options);     that.render();   };     //默认配置   Class.prototype.config = {     close: false  //默认:不开启关闭按钮     ,theme: ''   //背景:颜色     ,content: [] //默认标签     ,aldaBtn: false //默认配置   };    // 初始化   Class.prototype.init = function(){     var that = this     ,spans = ''     ,options = that.config     ,span = document.createElement("span"),     spantext = $(span).text("获取全部数据").addClass('albtn');     if(options.aldaBtn){       $('body').append(spantext)     }          $.each(options.content,function(index,item){       spans +='<span><em>'+item+'</em><button type="button" class="close">×</button></span>';       // $('<div class="layui-flow-more"><a href="javascript:;">'+ ELEM_TEXT +'</a></div>');     })     options.elem.before(spans)     that.events()   }    Class.prototype.render = function(){     var that = this     ,options = that.config     options.elem = $(options.elem);     that.enter()   };    // 回车生成标签   Class.prototype.enter = function(){     var that = this     ,spans = ''     ,options = that.config;     options.elem.focus();     options.elem.keypress(function(event){         var keynum = (event.keyCode ? event.keyCode : event.which);         if(keynum == '13'){           var $val = options.elem.val().trim();         if(!$val) return false;         if(options.content.indexOf($val) == -1){           options.content.push($val)           that.render()           spans ='<span><em>'+$val+'</em><button type="button" class="close">×</button></span>';           options.elem.before(spans)         }         options.done && typeof options.done === 'function' && options.done($val);         options.elem.val('');       }        })   };      //事件处理   Class.prototype.events = function(){      var that = this     ,options = that.config;     $('.albtn').on('click',function(){       console.log(options.content)     })     $('#tags').on('click','.close',function(){       var Thisremov = $(this).parent('span').remove(),       ThisText = $(Thisremov).find('em').text();       options.content.splice($.inArray(ThisText,options.content),1)     })   };    //核心入口   inputTags.render = function(options){     var inst = new Class(options);     inst.init();     return thisinputTags.call(inst);   };   exports('inputTags',inputTags); }).link('css/inputTags.css')

更多layui知识请关注layui使用教程栏目。

以上就是layui标签输入框inputTags介绍的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： layui