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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
vue axios用法教程详解
Jul 23 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
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返回字符串中所有单词的方法
2015/03/09 PHP
php去掉文件前几行的方法
2015/07/29 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
angular的输入和输出的使用方法
2018/09/22 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python 如何实现访问者模式
2020/07/28 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
旅游管理毕业生自荐信范文
2014/03/19 职场文书
商场父亲节活动方案
2014/08/27 职场文书
自查自纠工作总结
2014/10/15 职场文书
2014年就业工作总结
2014/11/26 职场文书
毕业生评语大全
2015/01/04 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js