帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery tags 输入插件 带标签统计验证功能

帝国模板之家 2020-12-17 网页特效 评论

插件介绍

这是一个轻量级的jQuery Tags输入插件,外观精美。功能强悍,可以检测到允许键入的最大字符数,插入的最大标记数,页面加载时自动聚焦于输入的标记,使用Enter键、空格键或撇号键添加标记的功能。

兼容的浏览器

Chrome, IE9+, FireFox, Opera, Safari

使用方法

1. 在页面中加载插件css样式文件。

<link rel="stylesheet" href="all.css" />

2. 在网页上创建一个Tags输入标签。

<div class="tags-and-input">
  <span class="tag" data-value="moyouyouw">moyouyouw <i class="fas fa-times-circle"></i></span>
  <input type="text" class="input" autocomplete="false">
</div>

3. 创建错误提示信息

 <div class="errors">
 <span class="error empty">不能添加空tags</span>
 <span class="error syntax">请不要添加特殊符号。</span>
 <span class="error underscore">标签中请不要包含(_)</span>
 <span class="error already">这个标签已经添加过了</span>
 <span class="error max_chars">已超过最大字符限制</span>
 <span class="error max_tags">已超过最大标签限制</span>
</div>
4.在页面中添加统计字符和剩余tags标签代码。
<div class="details">
     <div class="char-length">剩余字符数<span></span> </div>
     <div class="tags-length">可添加 <span></span>Tags个</div>
</div>

5. 创建一个按钮来显示刚刚插入的TAGS。

<button class="add_tags">添加 Tags</button>
<div class="results">
      <div class="results-errors">没有多余的Tags可以添加</div>
        <div class="array">
        </div>
 </div>

6. 在页面底部插入jQuery库和tags输入插件文件。

<script src="jquery.min.js"></script>
<script src="script.js"></script>
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言