charcount.js
<textarea maxlength="1000"></textarea>
<script type="text/javascript" language="javascript" src="<?="$g4[path]/js/charcounter.js"?>"></script>
요렇게요 ;)
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
/*If you want to use this script, please keep the original author in this header!Purpose: Script for applying maxlengths to textareas and monitoring their character lengths.Author: James O''CullDate: 08/14/08사용법: textarea가 끝나는 부분에 script를 불러오시면 됩니다 ;)<textarea maxlength="1000"></textarea><script type="text/javascript" language="javascript" src="<?="$g4[path]/js/charcounter.js"?>"></script>If you add a new text area with javascript, simply call parseCharCounts() again find the new textarea(s) and label them!*/var LabelCounter = 0;function parseCharCounts(){//Get Everything...var elements = document.getElementsByTagName('textarea');var element = null;var maxlength = 9;var newlabel = null;for(var i=0; i < elements.length; i++){element = elements[i];if(element.getAttribute('maxlength') != null && element.getAttribute('limiterid') == null){maxlength = element.getAttribute('maxlength');//Create new labelnewlabel = document.createElement('label');newlabel.id = 'limitlbl_' + LabelCounter;newlabel.style.color = 'red';newlabel.style.display = 'block'; //Make it block so it sits nicely.newlabel.innerHTML = "Updating...";//Attach limiter to our textareaelement.setAttribute('limiterid', newlabel.id);element.onkeyup = function(){ displayCharCounts(this); };//Append elementelement.parentNode.insertBefore(newlabel, element);//Force the update now!displayCharCounts(element);}//Push up the numberLabelCounter++;}}function displayCharCounts(element){var limitLabel = document.getElementById(element.getAttribute('limiterid'));var maxlength = element.getAttribute('maxlength');var enforceLength = false;if(element.getAttribute('lengthcut') != null && element.getAttribute('lengthcut').toLowerCase() == 'true'){enforceLength = true;}//Replace \r\n with \n then replace \n with \r\n//Can''t replace \n with \r\n directly because \r\n will be come \r\r\n//We do this because different browsers and servers handle new lines differently.//Internet Explorer and Opera say a new line is \r\n//Firefox and Safari say a new line is just a \n//ASP.NET seems to convert any plain \n characters to \r\n, which leads to counting issuesvar value = element.value.replace(/\u000d\u000a/g,'\u000a').replace(/\u000a/g,'\u000d\u000a');var currentLength = value.length;var remaining = 0;if(maxlength == null || limitLabel == null){return false;}remaining = maxlength - currentLength;if(remaining >= 100){limitLabel.style.color = 'green';limitLabel.innerHTML = remaining + ' 글자 남았습니다';}else if(remaining < 100 && remaining >20){limitLabel.style.color = 'orange';limitLabel.innerHTML = remaining + ' 글자 남았습니다';}else{limitLabel.style.color = 'red';limitLabel.innerHTML = remaining + ' 글자 남았습니다';}}//Go find our textareas with maxlengths and handle them when we load!parseCharCounts();
<textarea maxlength="1000"></textarea>
<script type="text/javascript" language="javascript" src="<?="$g4[path]/js/charcounter.js"?>"></script>
요렇게요 ;)
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0