一个简单的输入关键字添加标签效果
2017-04-15 00:12
1051 查看
实现功能:输入关键字加空格键添加tag标签
按Backspace键删除一个标签
输入关键字后,鼠标失去焦点添加tag标签
keyWord.init方法初始化方法
展示效果:
demo
value:隐藏字段的id
max:最多输入关键字个数
tips:提示语
按Backspace键删除一个标签
输入关键字后,鼠标失去焦点添加tag标签
keyWord.init方法初始化方法
展示效果:
demo
<style> .block { display:flex; flex-direction:row; align-items:center; width:500px; height:30px; border:1px solid #ddd; padding:10px; margin:100px auto 0; } #wordTags { display:flex; flex-wrap:nowrap; } input{ width:100%; height:20px; border:none; } </style> <div class="block"> <div id="wordTags"></div> <input id="wordInput" type="text" name="" placeholder="请输入关键词以空格结尾"> <input id="wordHiddenInput" type="hidden" name=""> </div> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script type="text/javascript" src="aspect.js"></script> <script type="text/javascript" src="keyWord.js"></script>
$(function () { var keyWord = $("#wordInput").keyWord({ panel: '#wordTags', value: '#wordHiddenInput', max: 3, tips: '最多只能输入3项' }); keyWord.init('php,java,前端开发') });属性说明:panel:面板的id
value:隐藏字段的id
max:最多输入关键字个数
tips:提示语
相关文章推荐
- 一个简单的输入关键字添加标签效果
- Javascript实现一个简单的输入关键字添加标签效果实例
- 写了一个PHP智能标签输入效果
- android 编辑标签,在一个文本框输入标签回车添加退格删除
- 一个VB.NET写的简单图片缩放处理组件源代码,支持添加半透明效果小图标
- 窗体上有两个文本框:一个文本框中最多输入字符6个;一个文本框中输入任何内容都显示*号。再添加一个按钮、2个单选按钮。实现单击按钮后,根据单选按钮,将对应文本框中内容显示在标签
- android 给LinearLayout中添加一定数量的控件,并让着一定数量的控件从右到左移动,每隔若干秒停顿一下,最后一个view链接第一个view,然后继续移动循环往复,形成一个死循环简单动画效果
- 建立一个文本文件in.txt,在其中输入若干个正整数,中间用空格分隔,然后保存起来;在窗体上添加一个命令按钮和一个标签框,当单击命令按钮时将in.txt文件中存放的所有的能被3整除的数的和显示在标签框
- 简单table 给一个样式 效果
- 一个async和await 关键字的简单入门
- 简单说 用CSS做一个魔方旋转的效果
- Linux FTP 服务器配置简单说明【从防火墙关闭到关闭selinux-sestatus到配置ftp用户访问的数据目录再到添加一个ftp用户】
- 五个添加光影效果的简单技巧
- Js版本的打老鼠游戏--这里简单用一个图标表示老鼠 关键字:js对表格进行动态创建
- 一个c#上传的程序,可以生成缩略图也可以自由添加水印效果
- js(JavaScript)实现TAB标签切换效果的简单实例
- iOS 数字输入键盘添加一个完成按钮
- 编写自己的shell解析器(一)一个简单的循环命令输入和历史打印
- jquery实现的一个简单进度条效果实例