layui扩展主键inputTags增加方法：失去焦点生成标签、回退输入框内容是空时删除最后一项生成的标签、以及输入时提示框的处理

置顶

时光最清楚

于 2020-09-22 14:38:28 发布

阅读量1.5k

点赞数

分类专栏： layui 文章标签： html css js

本文链接：https://blog.youkuaiyun.com/sinat_35225871/article/details/108731025

版权

本文介绍了如何使用layui扩展主键inputTags，实现输入框失去焦点时生成标签、按Backspace删除最后一项标签以及输入提示框的处理。详细讲解了键盘事件和失去焦点事件的处理方法，并提供了html结构示例和资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果(输入或者回退时输入框内容不为空则显示下面红色字体的输入框，输入框内容为空不提示，内容为空时按Backspace回退键删除最后一项标签"125566")

输入时提示

提示框的css样式

	  .inputTagsTips{
	    position: relative;
	    top: 0px;
	    height: auto;
	    box-shadow: 1px 1px 3px 1px;
	    border-top: 1px #007DDB solid;
	    font-size: 16px;
	    text-align: center;
	    white-space: normal;
	    word-break: break-all;
	    word-wrap: break-word;
	}
	.inputTagsTips span{
	    width: 100%;
	    color: red;
	}

增加的部分

键盘事件(回退按键的处理需要在按下按键的时候获取输入框的值以及松开按键时获取输入框的值，前后的值做对比才能确定是回退最后一个字符还是删除最后一项生成的标签)

//输入框按键事件
  Class.prototype.keyup =function () {
        var that = this,options = that.config;
        var oldVal = '';
        options.elem.focus();