/*

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''Cull

Date: 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 label

newlabel = 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 textarea

element.setAttribute('limiterid', newlabel.id);

element.onkeyup = function(){ displayCharCounts(this); };

//Append element

element.parentNode.insertBefore(newlabel, element);

//Force the update now!

displayCharCounts(element);

}

//Push up the number

LabelCounter++;

}

}

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 issues

var 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> 
요렇게요 ;)