textarea 글자수 표기하기 > 그누4 팁자료실

그누4 팁자료실

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

textarea 글자수 표기하기 정보

textarea 글자수 표기하기

본문

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

charcount.js

/*
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가 끝나는 부분에 script를 불러오시면 됩니다 ;)

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

댓글 5개

© SIRSOFT
현재 페이지 제일 처음으로