Javascript实现一个简单的输入关键字添加标签效果实例


Posted in Javascript onJune 01, 2017

本文主要给大家介绍的是关于js输入关键字添加标签效果的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

实现功能:

  • 输入关键字加空格键添加tag标签
  • 按Backspace键删除一个标签
  • 输入关键字后,鼠标失去焦点添加tag标签
  • keyWord.init方法初始化方法

展示效果:

Javascript实现一个简单的输入关键字添加标签效果实例

示例代码

<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 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
node.js中fs.stat与fs.fstat的区别详解
Jun 01 #Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 #Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 #Javascript
详解vue过滤器在v2.0版本用法
Jun 01 #Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 #Javascript
js随机生成一个验证码
Jun 01 #Javascript
JS实现简单抖动效果
Jun 01 #Javascript
You might like
php无限遍历文件夹示例分享
2014/03/04 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
python选择排序算法实例总结
2015/07/01 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python 爬取小说并下载的示例
2020/12/07 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
优秀语文教师事迹
2014/05/18 职场文书
2014年教师节活动总结
2014/08/29 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技