脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 输入关键字添加标签

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

 更新时间：2017年06月01日 11:07:53   作者：itpinpai  
这篇文章主要给大家介绍了利用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:提示语

总结

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

您可能感兴趣的文章:

相关文章

  • JS实现元素的拖动与占位功能

    JS实现元素的拖动与占位功能

    这篇文章主要介绍了JS实现元素的拖动与占位功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • 一些常用且实用的原生JavaScript函数

    一些常用且实用的原生JavaScript函数

    日常开始中常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用,会常更新,同时也欢迎大家补充.
    2010-09-09
  • uniapp如何使用 web-view 与网页互相通信

    uniapp如何使用 web-view 与网页互相通信

    这篇文章主要介绍了uniapp如何使用 web-view 与网页互相通信,在APP中使用 this.$scope.$getAppWebview() 获取webview对象实例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • JavaScript中的事件循环机制及其运行原理

    JavaScript中的事件循环机制及其运行原理

    JavaScript中的事件循环机制是一种异步处理机制，通过维护事件队列和消息队列，实现任务的分发和执行。事件循环机制由主线程和任务队列构成，主线程运行完当前任务后会检查任务队列中是否有待执行的任务，如有则执行，否则等待
    2023-04-04
  • javascript里模拟sleep(两种实现方式)

    javascript里模拟sleep(两种实现方式)

    有几种方式，但都不完美 其一:不断循环，直到达到指定时间、其二:用xhr同步请求后台程序，比如传2000过去，后台就sleep 2秒后再返回，这种方式也有缺点，当N多客户端都请求后台时，一直保持连接http开销很大,感兴趣的朋友可以了解下啊
    2013-01-01
  • JS+CSS实现仿msn风格选项卡效果代码

    JS+CSS实现仿msn风格选项卡效果代码

    这篇文章主要介绍了JS+CSS实现仿msn风格选项卡效果代码,涉及JavaScript响应鼠标事件动态变换页面元素css样式实现切换功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JS Array.from()将伪数组转换成数组的方法示例

    JS Array.from()将伪数组转换成数组的方法示例

    这篇文章主要介绍了JS Array.from()将伪数组转换成数组的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • javascript instanceof 内部机制探析

    javascript instanceof 内部机制探析

    在 JavaScript 中，可以用 instanceof 来判断一个对象是不是某个类或其子类的实例。
    2010-10-10
  • 回车直接实现点击某按钮的效果即触发单击事件

    回车直接实现点击某按钮的效果即触发单击事件

    这篇文章主要介绍了回车直接实现点击某按钮的效果即触发单击事件,需要的朋友可以参考下
    2014-02-02
  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    这篇文章主要为大家分享了js实现搜索框关键字智能匹配代码，感兴趣的朋友可以参考一下
    2016-01-01

最新评论