`

Bootstrap-maxlength 使用

 
阅读更多

Demo:http://mimo84.github.io/bootstrap-maxlength/

 

用法

1 给页面上的 input 或者 textarea 标签加上maxlenght 属性

<input type="text" name="nickname" maxlength="20" id="nickname">

 

2配置一些选项

    <script type="text/javascript" >
    $(document).ready(function(){
    $('input#defaultconfig').maxlength()
        $('input#nickname').maxlength({
        alwaysShow: true,
        });

        $('textarea#msg').maxlength({
        alwaysShow: true
        });

    });
    </script>

 

3别忘记引入 js文件  jquery 需要1.9以上版本

 

    <script src="/static/js/bootstrap-maxlength.js"></script>
    <script src="/static/js/bootstrap-maxlength.min.js"></script>


 

最后效果图

 

当然还有很多选项可以配置见  插件主页

 

  • 大小: 12.1 KB
分享到:
评论

相关推荐

    前端项目-bootstrap-maxlength.zip

    对于压缩包内的文件列表“bootstrap-maxlength-master”,这通常表示这是一个Git仓库的主分支(master分支)的克隆。该文件夹可能包含以下内容: 1. `dist/`:包含编译后的CSS和JavaScript文件,可以直接在项目中...

    光年后台管理系统模板基于bootstrap 4.4.1版本

    jquery-tagsinput- jquery-treegrid- moment.js- bootstrap-notify- chosen.jquery- jquery.cookie- lyear-loading- perfect-scrollbar- popper- bootstrap.wizard- fullcalendar- bootstrap-maxlength- bootstrap-...

    bootstrap-maxlength:默认情况下,此插件与Twitter引导程序集成在一起,该引导程序使用徽章来显示用户要插入文本的字段的最大长度。 使用HTML5属性“ maxlength”工作

    该插件使用HTML5属性“ maxlength”来工作。 指示器徽标显示在焦点上,而在焦点丢失时消失。可配置选项alwaysShow :如果为true,则将忽略阈值,并且在输入或专注于输入时将始终显示剩余长度指示。 默认值: false ...

    Bootstrap-Formok

    Bootstrap-Formok 提供了一些常见的验证规则,如 `required`(必填)、`email`(电子邮件格式)、`url`(网址)、`number`(数字)、`minlength`(最小长度)和 `maxlength`(最大长度)等。同时,它还支持自定义...

    bootstrapvalidator是一款简单实用的Bootstrap3表单验证jQuery插件

    BootstrapValidator是针对Bootstrap3框架的一款高效且易于使用的jQuery表单验证插件,它极大地简化了在Web应用中实现复杂表单验证的过程。这款插件利用HTML5的数据属性(data attributes)来设定验证规则,使得...

    angular-forms-bootstrap-mvc5:教程-一种使用angularjs,引导程序和ASP.NET MVC5设计的表单

    此外,表单验证可以通过内置的指令如`ng-model`、`ng-minlength`、`ng-maxlength`等实现,提供良好的用户体验。 2. Bootstrap集成 Bootstrap提供了一系列预先设计的CSS样式和组件,如网格系统、表单控件、按钮、...

    BootstrapValidaor表单验证

    以上就是BootstrapValidator表单验证插件的基本使用方法和特性。通过它,你可以创建具有专业验证功能的表单,同时保持与Bootstrap一致的美观设计。记住,良好的表单验证不仅可以提高用户体验,也是保障数据安全的...

    bootstrap验证框架

    例如,`required`、`minlength` 和 `maxlength` 等属性可以用来控制用户输入。 9. enable.html:这可能涉及表单验证的启用和禁用。开发者可以通过此功能在特定条件下开启或关闭验证,例如在用户确认他们愿意接受...

    Metronic 1.5.2 – 超赞!基于 Bootstrap 的响应式后台管理模板

    New: Bootstrap Maxlength Plugin Integration New: Bootstrap Markdown Editor Plugin Integration Enhancement: Horizontal Scrollable Datatables Adaptable To Any Device Width Enhancement: Clickable Form ...

    BootStrapValidator初使用教程详解

    BootStrapValidator支持多种验证规则,如`notEmpty`(非空)、`emailAddress`(电子邮件格式)、`maxLength`(最大长度)、`numeric`(数字)等。你还可以自定义验证规则,以满足项目的特殊需求。 此外,BootStrap...

    formulario-bootstrap

    Bootstrap是目前最流行、最广泛使用的前端开发框架,它提供了一系列预设的CSS样式、组件和JavaScript插件,用于快速构建响应式、移动优先的网站和应用。在这个项目中,我们将深入探讨如何利用Bootstrap来创建功能...

    Validate和Bootstrap1

    Validate和Bootstrap插件详解 Validate插件是 jQuery的一个...掌握 Validate 插件的使用可以帮助我们快速构建验证系统,掌握 Bootstrap 的栅格系统、排版系统、表单系统和组件可以帮助我们快速构建 Web 应用程序。

    BootStrap表单控件之文本域textarea

    在HTML代码之后,我们引入了Bootstrap的CSS和JavaScript文件,这是使用Bootstrap库所必需的。这些文件通过CDN链接获取,确保了快速加载和兼容性: ```html &lt;!-- 最新版本的 Bootstrap 核心 CSS 文件 --&gt; ...

    maxlength:jQuery MaxLength插件

    2. **下载并引入插件**:从项目提供的`maxlength-master`压缩包中,找到并引入`dist`目录下的`maxlength.min.js`文件。 3. **初始化插件**:在DOM加载完成后,通过`$('textarea').maxlength()`来初始化插件。可以...

    登录页面HTML CSS JS代码.doc

    7. HTML5新特性:使用了HTML5的新特性,例如placeholder属性、maxlength属性等。 CSS技术 1. CSS选择器:使用了CSS选择器来选择HTML元素,例如`.form-box`、`.welcom`等。 2. 样式设置:使用了CSS样式来设置HTML...

    AngularJs 参考手册PDF

    AngularJS通过指令和作用域作用提供了表单验证功能,文档中提到了`ng-change`事件,它能够触发当数据变化时,还可以对输入进行验证,常用的验证指令包括`ng-minlength`、`ng-maxlength`、`ng-pattern`等。...

    Angular-Weather:使用Angular.js的天气应用

    考虑到不同设备的屏幕尺寸,"Angular-Weather"可能采用了媒体查询和Bootstrap等工具实现响应式布局,以适应手机、平板和桌面等多种设备。 9. **部署与测试** 开发完成后,应用需要部署到服务器并进行测试。...

    前端知识点总结

    - **maxlength属性**:限制输入字段的最大长度。 - **Canvas**:动态绘制图形。 - **calc函数**:动态计算尺寸。 #### 九、注意事项 - **JS修改样式**:通过`addClass`和`removeClass`方法改变元素的类名,从而...

    struts1验证框架相当好的经典例子

    下面将详细介绍Struts1验证框架的使用。 首先,我们来看一下如何设置Struts1的验证框架。在`struts-config.xml`配置文件中,你需要定义一个`form-bean`,这代表一个表单 Bean,例如`userValidateForm`,并指定其...

Global site tag (gtag.js) - Google Analytics