这是一个很酷jQuery实现Bootstrap小工具,输入用户同意的字符数.它可以让你显示字符用户插入的最大长度。

1、引入jquery.js及bootstrap-maxlength.js

2、给页面的input或textarea加上maxlength属性

<input type="text" maxlength="10" id="name">

3、配置选项 

$(function(){

	$('#name').maxlength({

		alwaysShow: true

	});

})

代码： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>bootstrapl.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<meta http-equiv="description" content="this is my page">

		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

		<script type="text/javascript" src="js/bootstrap-maxlength.js"></script>

	</head>

	<body>

		<div style="float: left">

			姓名：

		</div>

		<div>

			<input type="text" style="width:303px" maxlength="10" id="name">

		</div>

		<div style="float: left">

			住址：

		</div>

		<div>

			<textarea name="textarea" id="address" maxlength=20 rows="5" cols="40"></textarea>

		</div>

	</body>

	<script type="text/javascript">

		$(function(){

			$('#name').maxlength({

	        	alwaysShow: true

	        });

			$('#address').maxlength({

	        	alwaysShow: true

	        });

		})

	</script>

</html>

效果如图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

官网：http://mimo84.github.io/bootstrap-maxlength/

版权声明：本文博客原创文章，博客，未经同意，不得转载。

Bootstrap-maxlength使用的更多相关文章

  1. 30 个惊艳的 Bootstrap 扩展插件

    Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...

  2. 30个惊人的插件来扩展 Twitter Bootstrap

    Bootstrap Maxlength It is a lightweight plugin that allows detecting the HTML maxlength property of ...

  3. （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分

    https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...

  4. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  5. metronic后台模板学习 -- 所用外部插件列表

    插件名称 描述 URL jQuery 1.11.0 js库,不用介绍了 http://www.jquery.com jQuery Migrate plugin 1.2.1 jQuery 老版本过渡迁移 ...

  6. 20 个 jQuery 和 CSS 的文本特效插件

    Jumble Text Effect Plugins Demo || Download Vticker – Vertical News Ticker With JQuery Plugin Demo | ...

  7. bootStrap树形目录组件

    需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用.车型一共有4级目录.要使用目录树.然后分活动和商品两种,需要能够通过不通参数来调用该组件.车型品牌要使用 ...

  8. jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示

    类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...

  9. TextBoxFor控件的扩展---Bootstrap在mvc上的应用

    TextBoxFor控件的问题: 1:自带了样式,再用bootstrap样式会有冲突. 2:要加水印,js事件,限制输入长度比较麻烦. 因此需要对textboxfor控件进行扩展. 目标: 1:能使用 ...

  10. bootstrap学习总结-04 常用标签2

    1 表格 Bootstrap为表格设计了漂亮的样式. 1)表格基本实例 任意 <table> 标签添加 .table. <table class="table"& ...

随机推荐

  1. IIS安装asp组件：JMail 邮件收发组件

    JMail简介 jmail是一种服务器端的邮件发送组件,和个人用的客户端邮件软件不一样的.jmail是在服务器上给程序用来发邮件用的,除了软件编程人员,其他人一般平常用不上. jmail是一个第三方邮 ...

  2. Http与协议TCP协议简单易懂

    于C#编写代码,很多时候会遇到Http协议或TCP合约,这里做一个简单的了解. TCP对应于该传送层协议,和HTTP对应于应用层协议,从本质上讲,两者是没有可比性.Http该协议是基于TCP之上的,当 ...

  3. C#内存分配学习

    CLR内存分配分三大块区域:栈.GC堆.大对象堆. 一.线程堆栈(栈) 用于分配值类型实例.栈由操作系统进行管理,不受GC管理,当值类型不在其作用域(主要是指其所在函数内)时,其所占栈空间自动释放.栈 ...

  4. stringstream转换CString为string出错

    使用stringstream转换CString为string时,调试时发现是CString赋给stringstream没有问题,stringstram赋给string就不行,倒也不是没有赋成功,只是赋 ...

  5. Smart Framework

    Smart Framework:轻量级 Java Web 框架 发表于2年前(2013-09-01 08:39)   阅读(48569) | 评论(188) 544人收藏此文章, 我要收藏 赞83 阿 ...

  6. Task的异步模式

    Task的异步模式 返回该系列目录<基于Task的异步模式--全面介绍> 生成方法 编译器生成 在.NET Framework 4.5中,C#编译器实现了TAP.任何标有async关键字的 ...

  7. 怎么样eclipse发达国家多重聚合关系maven项目和使用git管理

    最近使用的项目的开发maven,多于maven有项目之间有一定的联系,因此,创建一个单独的,然后,maven聚合管理. 项目采用git要管理代码.由于上传的代码集时,.gitignore不要上传文件. ...

  8. Extjs grid column里添加button等html标签，并增加点击事件

    Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button 如何能在column里增加html标签,并给button添加事件呢? 1. ...

  9. Linux内核分析（四）----进程管理|网络子系统|虚拟文件系统|驱动简介

    原文:Linux内核分析(四)----进程管理|网络子系统|虚拟文件系统|驱动简介 Linux内核分析(四) 两天没有更新了,上次博文我们分析了linux的内存管理子系统,本来我不想对接下来的进程管理 ...

  10. Json.Net6.0入门学习试水篇

    原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...