textarea 글자수 표기하기

질문답변 게시판에 표기하는 법을 여쭤보다가....대답해주시는 분이 없어서
구글에 찾아보니, 바로 나오더라구요...ㅋ
혹시 쓰시고 싶으신 분이 있나 해서 올립니다 ;)
java script네요 ;)

charcount.js
[code]
/*
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();
[/code]

사용법: textarea가 끝나는 부분에 script를 불러오시면 됩니다 ;)

<textarea maxlength="1000"></textarea>
<script type="text/javascript" language="javascript" src="<?="$g4[path]/js/charcounter.js"?>"></script>
요렇게요 ;)
|

댓글 5개

오호! 좋은 팁 감사합니다~^^
유용하게 쓰세요 ;) 참고로 저 위에 주석부분은 이 js를 쓰신 분 꺼라서....지우기가 에매해서 남겨뒀습니다 ;)
좋은 팁 감사합니다.^^
좋은 정보 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요. 나누면 즐거움이 커집니다.

+
제목 글쓴이 날짜 조회
13년 전 조회 9,604
13년 전 조회 4,060
13년 전 조회 7,719
13년 전 조회 5,011
13년 전 조회 6,107
13년 전 조회 9,111
13년 전 조회 3,588
13년 전 조회 5,241
13년 전 조회 4,717
13년 전 조회 4,403
13년 전 조회 3,856
13년 전 조회 6,081
13년 전 조회 7,013
13년 전 조회 5,674
13년 전 조회 8,222
13년 전 조회 5,066
13년 전 조회 4,033
13년 전 조회 5,203
13년 전 조회 4,435
13년 전 조회 3,731