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.configoptions.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第三方组件 inputTags.js

layui标签输入框inputTags相关推荐

layui标签输入框添加禁止点击标志
需求:在某些条件下不允许条件输入,输入元素变灰,并且出现禁止标志解决: 标签 class上面添加 layui-btn-disabled 再添加disabled即可 ,其他标签也适用 <sele ...
php输入框里的提示文字,input标签输入框带提示文字方法
本文主要介绍了input 标签实现输入框带提示文字效果(两种方法),需要的朋友可以参考下,希望能帮助到大家. 方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个 ...
layui标签页切换并自动刷新
layui每打开一个页面就会以标签页的形式保留在导航条上,然而我们在其他的标签页改了数据,再切换回去页面数据还是以前的,这里就需要一个切换标签页显示并自动刷新当前标签页咯,保证每次切换回来就能看到新数 ...
前端实现input标签输入框密码框显示文字效果
背景:各种登录网址账号密码输入框中的显示文字效果,当点击输入框时,显示的文字消失,当离开输入框后再次显示默认的文字思路:采用 input 标签,给它设置 CSS 样式,这里本人将两个 input 标 ...
标签输入框tag-input：仿QQ邮箱来增强你的组件交互与界面展示
话不多说,先看效果图: 输入框的场景实在太多太多了,但我们偶尔也会碰到一些个性化的需求,今天给大家介绍的就是类似上面这样,可以显示标签的输入框. 先来假设一下我们的输入需求: 要能使用键盘输入文字每 ...
Layui的tag标签
1.页面显示 <!DOCTYPE html> <html> <head><meta charset="utf-8"><titl ...
layui使用label标签
1. //引入layui标签 2. //body写代码 <form class="layui-form" action=""> <div cl ...
layui 输入框添加自定义图标
使用 layui 在输入框里添加自定义图标,layui 官网文档没有提供相关内容,但可以通过下面方式实现 1.准备好要使用的自定义图标如 Iconfont-阿里巴巴矢量图标库 https://www ...
html中td内容不换行显示,html小技巧之td,div标签里内容不换行
html小技巧之td,div标签里内容不换行在一些页面开发中,除自己操作外,引起换行的情况一般有: Ex一.td标签里内容长度过长引起换行: Ex二.div标签(或其他标记)里内容有文本和图片引起换 ...
关于控件的基本思考——输入框、复选框、开关
控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题.文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收! 一.现实世界的控件 " ...

layui标签输入框inputTags

layui标签输入框inputTags相关推荐

最新文章

热门文章