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"& ...
随机推荐
- 左右db_block_size了解和实验
关于db_block_gets了解和实验 实验 一. 自己手动创建的小表 创建一个区大小为 40k SYS@ORCL>show parameter db_block_size NAME ...
- [leetcode] Combination Sum and Combination SumII
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
- 思维导图之C++语言程序设计总结
花了大约一周的时间,将c++的课本过了一遍,米老师说第一遍不求甚解,仅仅管去看就能够了,我很成功地运行了老师这种方法,嘿嘿.那么c++是什么呢?百度上这样说,它是一种使用很广泛的计算机编程语言.C++ ...
- Android 常规任务的高度【schedule】与【scheduleAtFixedRate】差额
于android计划定期任务有两种方法 1.schedule 2.scheduleAtFixedRate 这两种方法的差别在于 首次调用时间(Date when)这个參数 <span style ...
- hdu2665-Kth number
Kth number Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
- 移动端 (基于jquery的3个)touch插件
//第一个 Author: Alone Antroduction: 高级前端开发工程师 Sign: 人生没有失败,只有没到的成功. //依赖jQuery 或者Zepto <script> ...
- css3 menu 手机菜单1
首先看一下效果图; 效果1,主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己 ...
- ORDER BY RAND()
大概是因为需要研究了一下MYSQL随机样本实现.例如:离tablename表随机抽取了创纪录,我们一般的写法是:SELECT * FROM tablename ORDER BY RAND() LIMI ...
- AndroidUI组件之TabHost
package com.gc.tabhost; /** * @author Android将军 * * * * 1.TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置 * 多 ...