zoukankan      html  css  js  c++  java
  • jQuery插件InputLimitor实现文本框输入限制字数统计

    点我查看InputLimitor在线演示

    使用说明
    需要使用jQuery库文件和InputLimitor库文件
    http://jquery.com/
    http://plugins.jquery.com/project/inputlimitor

    同时可自定义显示提示框的CSS样式

    使用实例
    一,包含文件部分

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.inputlimitor.1.0.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.inputlimitor.1.0.css" />
    二,HTML部分

    <textarea rows="3" cols="30" name="textarea" class="limited"></textarea>
    三,javascript部分

    $('.limited').inputlimitor();
    如上实例是最简单的一种使用形式,如果要提示当前字符输入数和总数,可使用如下方法:

    $('input[name=text1]').inputlimitor({
    limit: 50,
    remText: '%n caractere%s restantes',
    limitText: 'Campo limitado a %n caractere%s.'
    });
    limit表示字符输入的限制数,remText表示输入字符提示文本,其中%n表示当前剩余字符数,%s表示输入的限制数。

    另外类似textlimit插件提示效果使用实例
    1,HTML部分

    <input type="text" name="text3" id="text3" size="30" />
    <span id="limitingtext" style="color: #999;">Field limited to 30 characters.</span>
    2,Javascript部分

    $('input[name=text3]').inputlimitor({
    limit: 30,
    boxId: 'limitingtext',
    boxAttach: false
    });
    boxId表示提示信息显示的ID

    InputLimitor插件与textlimit插件使用基本上差不多,都非常简单,InputLimitor插件功能更为强大,值得推荐!

    点我下载InputLimitor
    http://jquerycodes.googlecode.com/files/jquery-inputlimitor.1.0.zip

  • 相关阅读:
    Evensgn 的债务
    Passward
    拯救莫莉斯
    文艺平衡树
    Fliptile 翻格子游戏
    Making the Grade (bzoj1592)
    紧急疏散evacuate
    Password
    [NOIP2015]斗地主
    运输问题1
  • 原文地址:https://www.cnblogs.com/linzheng/p/1853578.html
Copyright © 2011-2022 走看看