Skip to content

Commit 4a47c26

Browse files
diptopolDiptopol Dam
diptopol
authored and
Diptopol Dam
committed
Added text count overflow message show
For appropriate parameters, added text count overflow message feature.
1 parent 2546bda commit 4a47c26

File tree

1 file changed

+74
-29
lines changed

1 file changed

+74
-29
lines changed

‎textcounter.js‎

Lines changed: 74 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,17 @@
2424
// append the count element
2525
var counterText = base.options.countDown ? base.options.countDownText : base.options.counterText,
2626
counterNum = base.options.countDown ? base.options.max : 0,
27-
$formatted_counter_text = $('<div/>').html(counterText.replace('%d', '<span class="' + base.options.textCountClass + '">' + counterNum + '</span>')).contents();
27+
$formatted_counter_text = $('<div/>').addClass('text-counter-div')
28+
.html(counterText.replace('%d', '<span class="' + base.options.textCountClass + '">' + counterNum + '</span>')),
29+
$count_overflow_text = $('<div/>').addClass(base.options.countOverflowTextCss);
30+
31+
base.hideMessage($count_overflow_text);
32+
33+
base.$container = $('<' + base.options.countContainerElement + '/>')
34+
.addClass(base.options.countContainerClass)
35+
.append($formatted_counter_text)
36+
.append($count_overflow_text);
2837

29-
base.$container = $('<' + base.options.countContainerElement + '/>').addClass(base.options.countContainerClass).append($formatted_counter_text);
3038
base.$text_counter = base.$container.find('span');
3139
base.$el.after(base.$container);
3240

@@ -218,29 +226,63 @@
218226
$this.addClass(base.options.inputErrorClass);
219227
$countEl.addClass(base.options.counterErrorClass);
220228

221-
if (base.options.displayErrorText) {
222-
switch(type) {
223-
case 'min':
224-
errorText = base.options.minimumErrorText;
225-
break;
226-
case 'max':
227-
errorText = base.options.maximumErrorText;
228-
break;
229+
switch(type) {
230+
case 'min':
231+
errorText = base.options.minimumErrorText;
232+
break;
233+
case 'max':
234+
errorText = base.options.maximumErrorText;
235+
236+
if (base.options.countOverflow) {
237+
base.setOverflowMessage();
229238
}
230239

240+
break;
241+
}
242+
243+
if (base.options.displayErrorText) {
231244
if (!$countEl.children('.error-text-' + type).length) {
232245
$countEl.append('<' + base.options.errorTextElement + ' class="error-text error-text-' + type + '">' + errorText + '</' + base.options.errorTextElement + '>');
233246
}
234247
}
235248
};
236249

250+
base.setOverflowMessage = function () {
251+
base.hideMessage(base.$container.find('.text-counter-div'));
252+
253+
base.removeOverflowMessage();
254+
255+
var overflowText = base.options.countOverflowText
256+
.replace('%d', base.textCount(base.$el.val()) - base.options.max)
257+
.replace('%type', base.options.type);
258+
259+
260+
var overflowDiv = base.$container.find('.' + base.options.countOverflowTextCss).append(overflowText);
261+
base.showMessage(overflowDiv);
262+
},
263+
264+
base.removeOverflowMessage = function () {
265+
base.$container.find('.' + base.options.countOverflowTextCss).empty();
266+
},
267+
268+
base.showMessage = function ($selector) {
269+
$selector.css('display', 'inline');
270+
},
271+
272+
base.hideMessage = function ($selector) {
273+
$selector.css('display', 'none');
274+
},
275+
276+
237277
base.clearErrors = function(type) {
238278
var $this = base.$el,
239279
$countEl = base.$container;
240280

241281
$countEl.children('.error-text-' + type).remove();
242282

243283
if ($countEl.children('.error-text').length == 0) {
284+
base.removeOverflowMessage();
285+
base.showMessage(base.$container.find('.text-counter-div'));
244286
$this.removeClass(base.options.inputErrorClass);
245287
$countEl.removeClass(base.options.counterErrorClass);
246288
}
@@ -251,25 +293,28 @@
251293
};
252294

253295
$.textcounter.defaultOptions = {
254-
'type' : "character", // "character" or "word"
255-
'min' : 0, // minimum number of characters/words
256-
'max' : 200, // maximum number of characters/words, -1 for unlimited, 'auto' to use maxlength attribute
257-
'countContainerElement' : "div", // HTML element to wrap the text count in
258-
'countContainerClass' : "text-count-wrapper", // class applied to the countContainerElement
259-
'textCountClass' : "text-count", // class applied to the counter length
260-
'inputErrorClass' : "error", // error class appended to the input element if error occurs
261-
'counterErrorClass' : "error", // error class appended to the countContainerElement if error occurs
262-
'counterText' : "Total Count: %d", // counter text
263-
'errorTextElement' : "div", // error text element
264-
'minimumErrorText' : "Minimum not met", // error message for minimum not met,
265-
'maximumErrorText' : "Maximum exceeded", // error message for maximum range exceeded,
266-
'displayErrorText' : true, // display error text messages for minimum/maximum values
267-
'stopInputAtMaximum' : true, // stop further text input if maximum reached
268-
'countSpaces' : false, // count spaces as character (only for "character" type)
269-
'countDown' : false, // if the counter should deduct from maximum characters/words rather than counting up
270-
'countDownText' : "Remaining: %d", // count down text
271-
'countExtendedCharacters' : false, // count extended UTF-8 characters as 2 bytes (such as Chinese characters)
272-
'twoCharCarriageReturn' : false, // count carriage returns/newlines as 2 characters
296+
'type' : "character", // "character" or "word"
297+
'min' : 0, // minimum number of characters/words
298+
'max' : 200, // maximum number of characters/words, -1 for unlimited, 'auto' to use maxlength attribute
299+
'countContainerElement' : "div", // HTML element to wrap the text count in
300+
'countContainerClass' : "text-count-wrapper", // class applied to the countContainerElement
301+
'textCountClass' : "text-count", // class applied to the counter length
302+
'inputErrorClass' : "error", // error class appended to the input element if error occurs
303+
'counterErrorClass' : "error", // error class appended to the countContainerElement if error occurs
304+
'counterText' : "Total Count: %d", // counter text
305+
'errorTextElement' : "div", // error text element
306+
'minimumErrorText' : "Minimum not met", // error message for minimum not met,
307+
'maximumErrorText' : "Maximum exceeded", // error message for maximum range exceeded,
308+
'displayErrorText' : true, // display error text messages for minimum/maximum values
309+
'stopInputAtMaximum' : true, // stop further text input if maximum reached
310+
'countSpaces' : false, // count spaces as character (only for "character" type)
311+
'countDown' : false, // if the counter should deduct from maximum characters/words rather than counting up
312+
'countDownText' : "Remaining: %d", // count down text
313+
'countExtendedCharacters' : false, // count extended UTF-8 characters as 2 bytes (such as Chinese characters)
314+
'twoCharCarriageReturn' : false, // count carriage returns/newlines as 2 characters
315+
'countOverflow' : false, // count text overflow
316+
'countOverflowText' : "About %d %type has been entered", // text message for count overflow
317+
'countOverflowTextCss' : "text-overflow-div", // css for overflow text count
273318

274319
// Callback API
275320
'maxunder' : function(el){}, // Callback: function(element) - Fires when counter under max limit

0 commit comments

Comments
 (0)