jquery插件artTxtCount输入字数限制,并提示剩余字数

工作中用到,需要批量处理下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>轻量级输入字数提示jQuery插件-B5教程网 www.bcty365.com</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.artTxtCount.js"></script>
<script>
// demo
jQuery(function(){

    // 批量
    $(‘.autoTxtCount‘).each(function(){
        $(this).find(‘.text‘).artTxtCount($(this).find(‘.tips‘), 140);
    });

    // 单个
    $(‘#test‘).artTxtCount($(‘#test_tips‘), 10);

});
</script>
<style>
/* demo */

body {
    font-size: 75%;
    font-family: ‘微软雅黑‘;
}
#demo {
    width: 500px;
    margin: 0px auto;
}
#demo .help, #demo .help a {
    color: #999;
}
#demo form {
    margin: 20px 0;
    padding: 8px;
    background: #F4F4F4;
    border: 1px solid #EDEDED;
}
#demo .tips {
    color: #999;
    padding: 0 5px;
}
#demo .tips strong {
    color: #1E9300;
}
#demo .tips .js_txtFull strong {
    color: #F00;
}
#demo textarea.text {
    width: 474px;
}
</style>
</head>

<body>
<div id="demo">
  <h1>artTxtCount - 轻量级输入字数提示插</h1>
  <p class="help">$(‘#text‘).artTxtCount($(‘#text_tips‘), 10);</p>
  <form class="autoTxtCount" action="" method="get">
    <div>
      <textarea class="text" name="" cols="50" rows="3"></textarea>
    </div>
    <div>
      <button type="submit">提交</button>
      <span class="tips"></span> </div>
  </form>
  <form class="autoTxtCount" action="" method="get">
    <div>
      <textarea class="text" name="" cols="50" rows="3"></textarea>
    </div>
    <div>
      <button type="submit">提交</button>
      <span class="tips"></span> </div>
  </form>
  <form action="" method="get">
    <input class="text" id="test" name="" type="text">
    <span id="test_tips" class="tips"></span><br>
    <button type="submit">提交</button>
  </form>
</div>
</body>
</html>
/* tangbin - http://www.planeArt.cn - MIT Licensed */
(function($){
    // tipWrap:     提示消息的容器
    // maxNumber:     最大输入字符
    $.fn.artTxtCount = function(tipWrap, maxNumber){
        var countClass = ‘js_txtCount‘,        // 定义内部容器的CSS类名
            fullClass = ‘js_txtFull‘,        // 定义超出字符的CSS类名
            disabledClass = ‘disabled‘;        // 定义不可用提交按钮CSS类名

        // 统计字数
        var count = function(){
            var btn = $(this).closest(‘form‘).find(‘:submit‘),
                val = $(this).val().length,

                // 是否禁用提交按钮
                disabled = {
                    on: function(){
                        btn.removeAttr(‘disabled‘).removeClass(disabledClass);
                    },
                    off: function(){
                        btn.attr(‘disabled‘, ‘disabled‘).addClass(disabledClass);
                    }
                };

            if (val == 0) disabled.off();
            if(val <= maxNumber){
                if (val > 0) disabled.on();
                tipWrap.html(‘<span class="‘ + countClass + ‘">\u8FD8\u80FD\u8F93\u5165 <strong>‘ + (maxNumber - val) + ‘</strong> \u4E2A\u5B57</span>‘);
            }else{
                disabled.off();
                tipWrap.html(‘<span class="‘ + countClass + ‘ ‘ + fullClass + ‘">\u5DF2\u7ECF\u8D85\u51FA <strong>‘ + (val - maxNumber) + ‘</strong> \u4E2A\u5B57</span>‘);
            };
        };
        $(this).bind(‘keyup change‘, count);

        return this;
    };
})(jQuery);
时间: 2024-10-02 10:15:45

jquery插件artTxtCount输入字数限制,并提示剩余字数的相关文章

JQ限制输入字数,并提示剩余字数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

实现在矩形框中输入文字,可以显示剩余字数的功能

如下图: 要实现上面的功能,需要做到三点: 1.实现矩形框布局 思路就是矩形框作为整个布局的一个background,在drawable中创建一个shap.xml样式文件 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="r

推荐60个jQuery插件(转)

jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现Javascript自定义动态调整网页文字大小 jQuery插件Magnify放大镜实现javascript图片放大功能 jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果 jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果

jQuery表单输入文字统计字数插件

这是一款非常实用的jQuery表单输入文字计数插件.该插件可以设置某个输入框或textarea可输入的最大文字数,当用户输入文字的时候,插件会将字数倒计数显示,提示用户还可以输入多少个文字,并且显示的数字随着数字的减少会越来越清晰. 效果演示:http://www.htmleaf.com/Demo/201503281587.html 下载地址:http://www.htmleaf.com/jQuery/Form/201503281586.html

jQuery实现的计算textarea可输入剩余字数

jQuery实现的计算textarea可输入剩余字数:textarea一般是用来输入文字性内容的,不过出于各种原因的考虑,文字的数量一般是受到限制的,下面就通过实例代码介绍一下,如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy

一个友好的文本框内显示提示语 jquery 插件

插件实现文本框内默认显示提示语,当文本框获得焦点时提示语消失. 如果没有输入或输入为空则失去焦点时提示语再次出现. 同时它的使用非常舒适简单,引入插件及 jquery 后,在原有的文本框内加上样式类(class="prompt-input")以及设置值(value="Your prompt")为提示语就可以了. 像这样: 1 <input class="prompt-input" type="text" value='Y

JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: 1 <div> 2 <textarea name="content" id="content" onkeyup="javascript:checkWords(this);" onmousedown="javascript:checkWords(this);"

100+经典常用的jQuery插件大全实例演示和下载

jQuery 表单插件 jQuery cxCalendar 日期选择器 jQuery cxColor 颜色选择器 jQuery cxSelect 联动下拉菜单 jQuery Validation Engine 表单验证 jQuery soColorPacker 网页拾色器 jQuery AutoComplete 自动补全 jQuery uploadify 文件上传 jQuery FileUpload 文件上传 jQuery LayDate 日期控件 jQuery ClockPicker 圆形时钟

【jQuery】学习jQuery插件的使用与写法(表单验证插件-validation)

最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示:实时验证. 三种不同的写法 1.1 确认哪个表单需要被验证,引入jquery.validate.js插件 <script type="text/javascript"> $(document).ready(function(){ $("#commentForm&qu