Add a textbox with id and maxlength attributes like
1 |
<input type="text" id="UName" maxlength="50"/> |
add following code in js file.
(this code find all textbox/textarea in application and append div(charleft) to the textbox/textarea.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
$(document).ready(function () { $('input:text').each(function () { var maxlength1 = $(this).attr("maxlength"); if (maxlength1 > 0) { var options3 = { 'maxCharacterSize': maxlength1, 'originalStyle': 'originalDisplayInfo', 'warningStyle': 'warningDisplayInfo', 'warningNumber': 20, 'displayFormat': '#input/#max | #words Words' // 'displayFormat':'#input Characters | #left Characters Left | #words Words' }; $("#" + $(this).attr("id")).textareaCount(options3); } }); $('textarea').each(function () { var maxlength = $(this).attr("maxlength"); if (maxlength > 0) { var options3 = { 'maxCharacterSize': maxlength, 'originalStyle': 'originalDisplayInfo', 'warningStyle': 'warningDisplayInfo', 'warningNumber': 20, 'displayFormat': '#input/#max | #words Words' // 'displayFormat':'#input Characters | #left Characters Left | #words Words' }; $("#" + $(this).attr("id")).textareaCount(options3); } }); }); (function ($) { $.fn.textareaCount = function (options, fn) { var defaults = { maxCharacterSize: -1, originalStyle: 'originalTextareaInfo', warningStyle: 'warningTextareaInfo', warningNumber: 20, displayFormat: '#input characters | #words words' //'displayFormat':'#input Characters | #left Characters Left | #words Words' }; var options = $.extend(defaults, options); var container = $(this); $("<div class='charleft'> </div>").insertAfter(container); //create charleft css var charLeftCss = { 'width': container.width() }; var charLeftInfo = getNextCharLeftInformation(container); charLeftInfo.addClass(options.originalStyle); charLeftInfo.css(charLeftCss); var numInput = 0; var maxCharacters = options.maxCharacterSize; var numLeft = 0; var numWords = 0; window.onload = limitTextAreaByCharacterCount(); container.bind('keyup', function (event) { limitTextAreaByCharacterCount(); }) .bind('mouseover', function (event) { setTimeout(function () { limitTextAreaByCharacterCount(); }, 10); }) .bind('paste', function (event) { setTimeout(function () { limitTextAreaByCharacterCount(); }, 10); }); function limitTextAreaByCharacterCount() { charLeftInfo.html(countByCharacters()); //function call back if (typeof fn != 'undefined') { fn.call(this, getInfo()); } return true; } function countByCharacters() { var content = container.val(); var contentLength = content.length; //Start Cut if (options.maxCharacterSize > 0) { //If copied content is already more than maxCharacterSize, chop it to maxCharacterSize. if (contentLength >= options.maxCharacterSize) { content = content.substring(0, options.maxCharacterSize); } var newlineCount = getNewlineCount(content); // newlineCount new line character. For windows, it occupies 2 characters var systemmaxCharacterSize = options.maxCharacterSize - newlineCount; if (!isWin()) { systemmaxCharacterSize = options.maxCharacterSize } if (contentLength > systemmaxCharacterSize) { //avoid scroll bar moving var originalScrollTopPosition = this.scrollTop; container.val(content.substring(0, systemmaxCharacterSize)); this.scrollTop = originalScrollTopPosition; } charLeftInfo.removeClass(options.warningStyle); if (systemmaxCharacterSize - contentLength <= options.warningNumber) { charLeftInfo.addClass(options.warningStyle); } numInput = container.val().length + newlineCount; if (!isWin()) { numInput = container.val().length; } numWords = countWord(getCleanedWordString(container.val())); numLeft = maxCharacters - numInput; } else { //normal count, no cut var newlineCount = getNewlineCount(content); numInput = container.val().length + newlineCount; if (!isWin()) { numInput = container.val().length; } numWords = countWord(getCleanedWordString(container.val())); } return formatDisplayInfo(); } function formatDisplayInfo() { var format = options.displayFormat; format = format.replace('#input', numInput); format = format.replace('#words', numWords); //When maxCharacters <= 0, #max, #left cannot be substituted. if (maxCharacters > 0) { format = format.replace('#max', maxCharacters); format = format.replace('#left', numLeft); } return format; } function getInfo() { var info = { input: numInput, max: maxCharacters, left: numLeft, words: numWords }; return info; } function getNextCharLeftInformation(container) { return container.next('.charleft'); } function isWin() { var strOS = navigator.appVersion; if (strOS.toLowerCase().indexOf('win') != -1) { return true; } return false; } function getNewlineCount(content) { var newlineCount = 0; for (var i = 0; i < content.length; i++) { if (content.charAt(i) == '\n') { newlineCount++; } } return newlineCount; } function getCleanedWordString(content) { var fullStr = content + " "; var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi; var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, ""); var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi; var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " "); var splitString = cleanedStr.split(" "); return splitString; } function countWord(cleanedWordString) { var word_count = cleanedWordString.length - 1; return word_count; } }; })(jQuery); |
and add following css
1 2 3 4 5 6 7 8 9 10 11 |
.originalDisplayInfo { text-align: left; font-size: 12px; color: #333333; } .warningDisplayInfo { text-align: left; font-size: 12px; color: #96201A; } |
🙂