Demo地址:http://webspirited.com/tagit/

使用方法:

除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.com/hailwood/jQuery-Tagit

<link href="~/Content/jquery.tagit.css" rel="stylesheet" />
<link href="~/Content/tagit.ui-zendesk.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/tag-it.min.js"></script>

HTML中,你的文本框替换成:<ul id="myTags"></ul>

然后加入一段Js:

    $(document).ready(function () {
//输入逗号自动分割的控件,Demo:http://webspirited.com/tagit/
$("#myTags").tagit({
allowSpaces: true,
singleField: true,//必须要加这个,不然会把Tag当作一个List给提交过去。
fieldName: 'DailyEvaluateValues'//这个是只你的字段名称,提交表单时会用这个name
});
});

使用就是这么简单!效果如下:

就是这么爽,快来试试吧~~~~

Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容的更多相关文章

  1. ActiveReports 报表控件V12新特性 -- 文本框和标签控件的浓缩

    ActiveReports是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForms / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求 ...

  2. Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览

    1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...

  3. Jquery / js 判断数据类型方法(限制文本框类型输入)

    当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...

  4. 实现拖拽上传文件的一款小控件——dropzone

    由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...

  5. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. jQuery控件有所感悟

    两种写法对比: 第一种: ;(function($){ $.fn.myplugin = function(op,params){ if (typeof op == 'string'){ return ...

  7. jquery控件的学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. MFC控件编程之复选框单选框分组框

    MFC控件编程之复选框单选框分组框 一丶分组框 分组框 英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍 二丶单选框 英文: Raido Button 单选框需要注意的事项 1. ...

  9. MFC控件编程之 按钮编辑框.静态文本的使用,以及访问控件的七种方法.

    MFC控件编程之 按钮编辑框.静态文本的使用以及访问控件的七种方法. 一丶按钮.静态文本的通用属性. 他们都有一个属性.就是可以输入标题内容.以及可以自定义控件ID. 创建一个MFC Dlg对话框. ...

随机推荐

  1. EasyUI datebox 日期范围 日期关联

    jQuery EasyUI 1.4.5 html: <label>提交日期:</label> <input id="startDate" name=& ...

  2. Jvm运行时内存解析

    一.jvm的概念 在了解jvm的概念之前,我们先来了解java平台的逻辑结构,图片来自<深入java虚拟机> 从图中我们可以看到jdk包含了jre,java语言和java开发工具和Api, ...

  3. 【转】js判断一个object对象是否为空

    判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” for (var i in obj) { // 如果不为空 ...

  4. Hadoop序列化程序报错

    这个错误指向序列化类,注意实现的Read和Wirte顺序一定要一致,并且要使用基本类型,不要使用包装类. java.lang.Exception: java.io.EOFException at or ...

  5. npm安装指定版本

    今天犯了一个低级错误,在npm安装依赖时,命令写成下了格式 npm i --save iview 2.0.0 要安装指定版本应该使用 npm i --save iview@2.0.0 谨记

  6. pv-remjs的快速开始

    pv-remjs 这是一个移动端适配的工具类,采用rem布局的方式 ## 快速开始 在html文件中引入,先查看版本`<script src= "https://unpkg.com/p ...

  7. 删除SVN版本信息 .svn文件夹

    环境:MyEclipse.Windows 问题描述: 在MyEclipse中当我们需要将一个文件夹(包含若干文件或嵌套文件夹)拷贝到另一个文件夹时,此时文件内容虽然拷贝过去了,但其下面的 .svn文件 ...

  8. dubbo学习总结三 消费端

    消费端跟服务端类似 注意点是dubbo:reference 和服务端的dubbo:service做区分 消费端主要是处理发送过来的请求

  9. v1.0.2-2017.04.26

    v1.0.2-2017.04.26 增加支付宝.微信查询接口 增加订单轮询工程 增加网关下单后发起订单轮询业务流程 v1.0.1-2017.04.05 修复分页乱码bug 增加支付密码字段.商户服务器 ...

  10. Python学习---重点模块之re

    正则表达式是用来操作字符串,但是字符串提供的正则是完全匹配,有时候我们需要进行模糊匹配,这个时候就需要正则表达式了.通过re模块来实现,由C语言来执行底层的匹配 字符匹配(普通字符,元字符): 1 普 ...