PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    Bootstrap-maxlength使用教程

    作者:w634381967来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:这是一款非常酷的jQuery实现的Bootstrap插件,允许输入用户字符数.它可以让你显示字符用户插入的最大长度。1、引入jquery.js及bootstrap-max...
    这是一款非常酷的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> 


    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-1065-1.html
    相关热词搜索: Bootstrap教程