Bootstrap-maxlength使用
这是一个很酷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使用的更多相关文章
- 30 个惊艳的 Bootstrap 扩展插件
Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...
- 30个惊人的插件来扩展 Twitter Bootstrap
Bootstrap Maxlength It is a lightweight plugin that allows detecting the HTML maxlength property of ...
- （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- metronic后台模板学习 -- 所用外部插件列表
插件名称 描述 URL jQuery 1.11.0 js库,不用介绍了 http://www.jquery.com jQuery Migrate plugin 1.2.1 jQuery 老版本过渡迁移 ...
- 20 个 jQuery 和 CSS 的文本特效插件
Jumble Text Effect Plugins Demo || Download Vticker – Vertical News Ticker With JQuery Plugin Demo | ...
- bootStrap树形目录组件
需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用.车型一共有4级目录.要使用目录树.然后分活动和商品两种,需要能够通过不通参数来调用该组件.车型品牌要使用 ...
- jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...
- TextBoxFor控件的扩展---Bootstrap在mvc上的应用
TextBoxFor控件的问题: 1:自带了样式,再用bootstrap样式会有冲突. 2:要加水印,js事件,限制输入长度比较麻烦. 因此需要对textboxfor控件进行扩展. 目标: 1:能使用 ...
- bootstrap学习总结-04 常用标签2
1 表格 Bootstrap为表格设计了漂亮的样式. 1)表格基本实例 任意 <table> 标签添加 .table. <table class="table"& ...
随机推荐
- iphone内容开发技术学习
一.iOS基础 1 开发环境搭建以及IOS组件.框架的概要介绍. 2 mac操作系统与iOS操作系统 3 xcode IDE开发环境的初始 二.C语言基础 1数据类型.表达式与控制流程语句 2数组.函 ...
- 【Android进阶】快捷图标的创建与移除
注释已经说得很清楚了,如果有疑问,请留言 /** * 添加桌面快捷方式 * * @param view */ public void click1(View view) { if (isExit()) ...
- Effective C++笔记05：实现
条款26:尽可能延后变量定义式的出现时间 博客地址:http://blog.csdn.net/cv_ronny 转载请注明出处! 有些对象,你可能过早的定义它,而在代码运行的过程中发生了导常,造成了開 ...
- Bulk Insert具体订单
Bulk Insert具体订单 BULK INSERT与用户指定的格式的数据文件复制到数据库表或视图. 语法: BULK INSERT [ [ 'database_name'.][ 'owner' ] ...
- 黑马程序猿——java基金会--jdk、变量
学习内容: 1.Java发展历史 2.jdk和jre的差别,功能. 3.jdk和jre的下载和安装 4.配置环境.path和classpath 5.helloworld程序 6.进制之间的转换 7.凝 ...
- C奇淫技巧，——宏神奇
一个.宏列表 当这个问题面临: 有一个标志变量.位代表对应的含义. 我们须要提供一组函数来訪问设置这些位.可是对于每一个标记位的操作函数都是相似的.若有32个位,难道要搞32套相似的操作函数么? 你或 ...
- localStorge它storage事件
随着h5患病率和mobile发展.localStorage它不再是一个陌生的词汇.我相信大多数童鞋进行了联系,并用它.但storage事件相信有很多童鞋不清晰甚至没有接触.今天我们主要谈storage ...
- 第十二章——SQLServer统计信息（3）——发现过期统计信息并处理
原文:第十二章--SQLServer统计信息(3)--发现过期统计信息并处理 前言: 统计信息是关于谓词中的数据分布的主要信息源,如果不知道具体的数据分布,优化器不能获得预估的数据集,从而不能统计需要 ...
- Centos 7 静态学习IP建立
该研究主要集中在 Centos 7.0.1406 学习整理版! 1.编者 ifcfg-eth0 档,vim 同时尽量减少未安装安装,你并不需要自己安装叙述性说明. # vim /etc/sysconf ...
- Team Foundation Server 2015使用教程--读取器tfs组的checkin权限修改