m5simpleTextCount(改)

【目的】
テキストボックス・テキストエリアで入力文字数の最大値・現在値を表示したい。



【本家】
改造元のプラグインはこちら⇒「m5simpleTextCount」



【変更点】
１．jQuery1.10.x以降でも動作するように修正。
２．最大値を分母に表示するように修正。
３．色のデフォルトの値を修正。
４．警告色となる閾値のデフォルトの値を修正。
５．フォーカス時に表示されるようにデフォルトの値を修正。



【使い方】

<input class="countText10" type="text" />

<textarea class="countText200" rows="10"></textarea>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//sites.google.com/site/foolprogrammer/m5simpleTextCount.js?attredirects=0&d=1"></script>

<script type="text/javascript">
$('.countText10').m5simpleTextCount({
    maxLength: 10
});
$('.countText200').m5simpleTextCount({
    maxLength: 200
});
</script>

※詳しい使い方は本家を御覧ください。



【サンプル】











【ソースコード】

/**
 * m5simpleTextCount
 *
 * @version      1.0
 * @author       nori (norimania@gmail.com)
 * @copyright    5509 (http://5509.me/)
 * @license      The MIT License
 * @link         http://5509.me/log/m5simpletextcount
 *
 * Date: 2010-12-05 21:20
 */

(function($) {
    
    $.fn.m5simpleTextCount = function(options) {
        var conf = $.extend({
                focusDisplay: true,
                padding: '3px',
                color: '#3a87ad',
                atColor: '#b94a48',
                background: '#d9edf7',
                atBackground: '#f2dede',
                fontWeight: 'bold',
                atFontWeight: 'bold',
                opacity: .8,
                alertLength: -1,
                maxLength: 10
            }, options);
            
        $(this).each(function() {
            var target = $(this),
                targetOffset = target.offset(),
                border = {
                    rightWidth: parseInt(target.css('borderRightWidth')),
                    bottomWidth: parseInt(target.css('borderBottomWidth'))
                },
                currentCount = getCount(target),
                count = $('<span class="simpleTextCount"></span>')
                    .css({
                        padding: conf.padding,
                        display: 'block',
                        position: 'absolute',
                        color: conf.color,
                        background: conf.background,
                        fontWeight: conf.fontWeight,
                        opacity: conf.opacity
                    })
                    .text(currentCount + '/' + conf.maxLength),
                pos = {};
                
            countStyle(currentCount, count);
            
            $(window).resize(function() {
                setCountPos(count, getPos(target, count), border)
            });
            $('body').append(count);
            setCountPos(count, getPos(target, count), border);
            
            if ( conf.focusDisplay ) {
                count.hide();
                target
                    .focus(function() {
                        count.stop(true, true).fadeIn(250);
                    })
                    .blur(function() {
                        count.stop(true, true).fadeOut(250);
                    });
            }    
            target.keyup(function() {
                var currentCount = getCount(target);
                countStyle(currentCount, count);
                count.text(currentCount + '/' + conf.maxLength);
                setCountPos(count, getPos(target, count), border);
            });
        });
        
        function getCount(target) {
            return conf.maxLength - target.val().length;
        }
        
        function countStyle(currentCount, count) {
            if ( currentCount < (conf.alertLength + 1) ) {
                count.css({
                    color: conf.atColor,
                    background: conf.atBackground,
                    fontWeight: conf.atFontWeight
                });
            } else {
                count.css({
                    color: conf.color,
                    background: conf.background,
                    fontWeight: conf.fontWeight
                });
            }
        }
        
        function getPos(target, count) {
            var targetOffset = target.offset();
            return {
                x: Math.floor(targetOffset.left),
                y: Math.floor(targetOffset.top),
                xdash: target.get(0).offsetWidth,
                ydash: target.get(0).offsetHeight,
                cx: count.get(0).offsetWidth,
                cy: count.get(0).offsetHeight
            }
        }
        
        function setCountPos(count, pos, border) {
            return count.css({
                left: pos.x + pos.xdash - pos.cx - border.rightWidth,
                top: pos.y + pos.ydash - pos.cy - border.bottomWidth
            });
        }
    
    }

})(jQuery);

ダウンロード



以上です。