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"& ...
随机推荐
- 计算机管理系统——VB与Excel联系
今天爆震室管理系统--学生查看机器状态的时候发现有一个"导出到excel"的button.我去.感情还得跟excel表链接. 于是我咬碎了一地小银牙.一个下午都在查询vb与exce ...
- tcpdump参数及使用介绍（转）
原文地址:http://dogdogcom.blog.51cto.com/2402458/490398 tcpdump -a 将网络地址和广播地址转变成名字: -d 将匹配信息包的代码以人们可以理解的 ...
- javascript倒置再次被否定作用
于javascript位反然后可以转换为浮点塑料,而不是更有效parseInt近两倍 var start = new Date().getTime(); for (var i = 0; i < ...
- jquery之ajax中国乱码的解决方案
$.ajax({ dataType : 'json',type : 'POST',url : 'http://localhost/test/test.do',data : {id: 1, type: ...
- android visible invisible和gone差异
android中UI应用的开发中常常会使用view.setVisibility()来设置控件的可见性.当中该函数有3个可选值.他们有着不同的含义: View.VISIBLE--->可见 View ...
- Net 项目构建基于Jenkins + Github + Mono 的持续集成环境
Net 项目构建基于Jenkins + Github + Mono 的持续集成环境 阅读目录 1 安装 2 配置 3 测试 在Redhat enterprise 6.5 的服务器上,为在gutub 上 ...
- 原生js实现 常见的jquery的功能
原生选择器 充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...
- 怎么样eclipse发达国家多重聚合关系maven项目和使用git管理
最近使用的项目的开发maven,多于maven有项目之间有一定的联系,因此,创建一个单独的,然后,maven聚合管理. 项目采用git要管理代码.由于上传的代码集时,.gitignore不要上传文件. ...
- Python第一个基本教程6章 抽象的
Python 2.7.5 (default, May 15 2013, 22:43:36) [MSC v.1500 32 bit (Intel)] on win32 Type "copyri ...
- Cache基础知识OR1200在ICache一个简短的引论
以下摘录<步骤吓得核心--软-core处理器的室内设计与分析>一本书 12.1 Cache基本知识 12.1.1 Cache的作用 处理器的设计者通常会声称其设计的处理器一秒钟能做多少次乘 ...