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>

效果如图：

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

Bootstrap-maxlength使用相关推荐

（转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
30 个惊艳的 Bootstrap 扩展插件
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的We ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
html字体插件,20款jQuery CSS文字特效插件（有图有真相）
Jumble Text Effect Plugins 这是一款非常好用的插件,可以帮助你混合文本颜色,并使文字变成动画.这种效果是很酷,可以为设计添加不少生气. Vticker:jQuery滚动组件 ...
Bootstrap 与 Jquery validate 结合使用——简单实现
首先必须引入的JS和CSS <script type="text/javascript" src="${ctx}/static/js/jquery-1.9.1.mi ...
Bootstrap + Thymeleaf——预约维修前端页面设计(UI + JS数据校验 + JSON序列化 + AJAX提交)DEMO
技术栈 Bootstrap + JavaScript + jQuery + AJAX + Thymeleaf 源代码 <!DOCTYPE html> <html lang=" ...
Blazor 版 Bootstrap Admin 通用后台权限管理框架
前言上一篇介绍过了前后台分离的 NET Core 通用权限管理系统在这篇文章简要的介绍了 Bootstrap Admin 后台管理框架的一些功能.本篇文章带来的是微软最新出的 Blazor 版本的 ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
Bootstrap 3 响应式上传图片，时间拾取器和表单认证 Fileinput, Date/Time Pickr, Validator...
1. Bootstrap 3 响应式上传图片 bootstrap-fileinput 项目地址: https://github.com/kartik-v/bootstrap-fileinput Usa ...
HTML min/maxlength
min/maxlength minlength属性和maxlength属性用来指定文本框或 textarea 中,允许输入的最少字符数和最大字符数.一个汉字被看作一个字符.如,在以下文本框中,用户最少 ...

Bootstrap-maxlength使用

Bootstrap-maxlength使用相关推荐

最新文章

热门文章