textarea 글자수 표기하기 정보
textarea 글자수 표기하기본문
            
            
                        질문답변 게시판에 표기하는 법을 여쭤보다가....대답해주시는 분이 없어서
구글에 찾아보니, 바로 나오더라구요...ㅋ
혹시 쓰시고 싶으신 분이 있나 해서 올립니다 ;)
java script네요 ;)
charcount.js
사용법: textarea가 끝나는 부분에 script를 불러오시면 됩니다 ;)
<textarea maxlength="1000"></textarea>
<script type="text/javascript" language="javascript" src="<?="$g4[path]/js/charcounter.js"?>"></script>
요렇게요 ;)
                
                
                구글에 찾아보니, 바로 나오더라구요...ㅋ
혹시 쓰시고 싶으신 분이 있나 해서 올립니다 ;)
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
                
    0
댓글 5개

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