/* ============================================================================= jQuery Text Counter 1.0.0 Copyright(c) 2015, ShanaBrian Dual licensed under the MIT and GPL licenses. ============================================================================= */ (function($) { $.fn.textCounter = function(options) { if ($(this).length > 0) { if ($(this).length > 1) { $.each(this, function() { $(this).textCounter(options); }); return this; } var $element = this, $count = null, settings = {}; // 初期化 var init = function() { /* countMode : 文字数を数えて表示するか残数を表示するか [ 'up' | 'down' ] maxChars : 最大文字数 [ number ] ※ 0で無制限 overCount : 最大文字数を超えても数えるかどうか [ true | false ] errorClass : 最大文字数を超えた場合のクラス名 countClass : 文字数の出力する要素のクラス名 countErrorClass : 最大文字数を超えた場合で文字数の出力する要素のクラス名 callback : コールバック関数 outputElement : 文字数の出力先要素 [ 'after' | 'before' | 'append' | 'prepend' ] output : 文字数の出力先 [ 'after' | 'before' | 'append' | 'prepend' ] outputMaxChars : 最大文字数の出力 [ true | false ] prefix : 接頭語 suffix : 接尾語 event : チェック・更新するきっかけ(イベント) timer : Intervalによる監視を行うかどうか [ true | false ] */ settings = $.extend({ countMode : 'up', maxChars : 0, overCount : true, errorClass : 'over-charcters', countClass : 'charcters-count', countErrorClass : 'over-charcters', callback : false, outputElement : 'this', output : 'after', outputMaxChars : false, prefix : '', suffix : '', event : 'keyup change blur', timer : false }, options); setup(); }; // セットアップ var setup = function() { var $output = null, $countBox = $('
'); $count = $(''); $countBox.addClass(settings.countClass); if (settings.outputElement) { if (settings.outputElement === 'this') { $output = $element; } else if (typeof settings.outputElement === 'object' && 'jquery' in settings.outputElement) { $output = settings.outputElement; } else if (typeof settings.outputElement === 'string') { $output = $(settings.outputElement); } } if ($output && settings.output) { $countBox.append(settings.prefix, $count, settings.suffix); if (settings.output === 'after') { $output.after($countBox); } else if (settings.output === 'before') { $output.before($countBox); } else if (settings.output === 'append') { $output.append($countBox); } else if (settings.output === 'prepend') { $output.prepend($countBox); } } $element.on(settings.event, function() { check(); }); if (settings.timer) { var intervalId = setInterval(function() { check(); }, 10); } check(); }; // チェックの実行 var check = function() { var count = getCharactersLength(), errorFlag = overCheck(count), outputStr = ''; if (errorFlag) { $element.addClass(settings.errorClass); $count.parent().addClass(settings.countErrorClass); } else { $element.removeClass(settings.errorClass); $count.parent().removeClass(settings.countErrorClass); } if (settings.countMode && settings.countMode.match(/^(up|down)$/)) { if (settings.countMode === 'up') { outputStr = count; } else if (settings.countMode === 'down') { outputStr = settings.maxChars - count; } if (settings.outputMaxChars && settings.maxChars) { outputStr += ' / ' + settings.maxChars; } $count.text(outputStr); } if (settings.callback && typeof callback === 'function') { callback(count, errorFlag); } }; // 文字数を取得 var getCharactersLength = function() { var tagName = $element.get(0).tagName.toLowerCase(), type = $element.attr('type'), name = $element.attr('name'), $option = null, value = '', result = 0; if (tagName === 'input') { if (type) { if (type === 'radio' && $element.prop('checked')) { value = $element.val(); } else if (type === 'checkbox') { $.each($($element.selector + ':checked'), function() { value += $(this).val(); }); } else { value = $element.val(); } } } else if (tagName === 'textarea') { value = $element.val(); } else if (tagName === 'select') { $option = $element.find('option:selected'); if ($option.length > 0) { value = $option.val(); } } else { value = $element.text(); } if (value) { result = value.length; } return result; }; // 最大数より超えているかチェック var overCheck = function(number) { var result = false; if (number && String(number).match(/^[0-9]+$/) && settings.maxChars !== 0) { if (number > settings.maxChars) { result = true; } } return result; }; init(); } return this; }; })(jQuery);