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

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

实现功能：

  • 输入关键字加空格键添加tag标签
  • 按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:提示语

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • javascript实现动态标签云

    javascript实现动态标签云

    今天上学校的图书馆,看到了一个好玩的东西,特意百度了下,发现叫做"标签球",效果图为: 直接代码如下: CSS: #div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; } #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000;

  • js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>add_line&

  • js动态创建标签示例代码

    复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":&q

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

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

    本文主要给大家介绍的是关于js输入关键字添加标签效果的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 实现功能: 输入关键字加空格键添加tag标签 按Backspace键删除一个标签 输入关键字后,鼠标失去焦点添加tag标签 keyWord.init方法初始化方法 展示效果: demo演示地址 示例代码 <style> .block { display:flex; flex-direction:row; align-items:center; width:500px; height:

  • HTML+CSS+JavaScript创建一个简单的井字游戏

    HTML+CSS+JavaScript创建一个简单的井字游戏

    目录 实现 HTML 添加 CSS 实现 Javascript 部分 演示地址 实现 HTML 首先在 head 部分,我将包含我们稍后创建的 css 和 javascript 文件.我还添加了名为 Itim 的 Google 字体. <link rel="stylesheet" href="style.css" rel="external nofollow" > <link rel="preconnect"

  • 基于JavaScript实现一个简单的Vue

    Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现,因为vue主要是通过数据劫持来实现的,通过get.set来完成数据的读取和更新. var obj = {name:'wclimb'} var age = 24 Object.defineProperty(obj,'age',{ enumerable: true, // 可枚举 configurable: false, // 不能再define get () { return a

  • 利用JavaScript写一个简单计算器

    利用JavaScript写一个简单计算器

    效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

  • JavaScript实现一个简单的圣诞游戏

    JavaScript实现一个简单的圣诞游戏

    目录 前言 实现效果 代码 CSS代码 JS代码 html代码 演示流程 前言 圣诞节快来了,热榜都被一堆圣诞树攻占了,这样的流量密码我怎么会错过,大家都发圣诞树,我就不发啦,直接分享一个圣诞小游戏给大家玩,代码太长一定要先赞和收藏. 实现效果 一个简单的2D网页小游戏它的制作过程是有规律可寻的,它每个部分都有一定的套路,我们应该 把有规律的部分总结在一起,形成一个模板,把相应的模板写好了,到要生产某个对象时就可以用 模板,还有游戏的整个流程每个函数,每个js文件之间都是分工明确的:我们要总结好

  • 基于JavaScript实现单选框下拉菜单添加文件效果

    基于JavaScript实现单选框下拉菜单添加文件效果

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

  • 利用jQuery实现一个简单的表格上下翻页效果

    前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&

  • javascript写一个ajax自动拦截并下载数据代码实例

    javascript写一个ajax自动拦截并下载数据代码实例

    这篇文章主要介绍了javascript写一个ajax自动拦截并下载数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

  • JavaScript实现非常简单实用的下拉菜单效果

    JavaScript实现非常简单实用的下拉菜单效果

    本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

  • Vue 实现一个简单的鼠标拖拽滚动效果插件

    Vue 实现一个简单的鼠标拖拽滚动效果插件

    最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:github.com/qq449245884- 最近在做一个新的项目,有个需要是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会随着的鼠标的拖拽而移动,如果页面有内容,里面的内容也需要跟着拖动的外层整体移到. 一开始没啥思路,所以就发了个朋友圈,得到的答案挺多的,主要还是用拖拽之类的,但这个拖拽只是单个元素的拖动,我想要的整个视图的拖动. 这里线索又断了.

随机推荐