[프로젝트] 댓글창 만들기 (글자수 체크)

1/13

 

게시물 등록 게시판을 어느정도 마무리 짓고, 새로 맡게 된 댓글창..

프로젝트 시작 쯤 만들어놓은 UI 상세설계를 다시 봤는데 내가 만들어야 한다고 생각하니 막막했다...

 

그래도 등록게시판 하나 끝냈다고 몇시간 좀 만져보니 쉽게 밑그림은 그릴 수 있었다. 

 

 

댓글 글자수 체크 코드.

$(document).ready(function(){
 $('.commentbox').keyup(function (){
	var content = $(this).val();
	$('#counter').html("("+content.length+" / 최대 200자)");    //글자수 실시간 카운팅

	if (content.length > 200){
		alert("최대 200자까지 입력 가능합니다.");
		$(this).val(content.substring(0, 200));
		$('#counter').html("(200 / 최대 200자)");
	}
 });
});

 

<div class="container">
	<form name="commentInsertForm" method="post" enctype="multipart/form-data">
	    <div class="comtitle"><h3>댓  글</h3></div>
	
	    <div class="cominput">
	    <textarea class="commentbox" name="Com_Content" placeholder="댓글을 입력해주세요."></textarea>
	           
	    <div class="com2">
	           
	    <div class="com_btn">
	    <button type="button" class="button3">취소</button>
	    <button type="button" name="commentInsertBtn" class="button1">등록</button>
	                  
	    <button type="button" class="button2">
	    <i class="fas fa-images fa-lg" ></i></button>
	    </div>
	    <span style="color:#aaa;" id="counter">(0 / 최대 200자)</span>
	          		
	    </div>  
	    </div>
	</form>
</div> 

 

 

이제 해야되는 작업들은 전부 ajax인데.. 앞으로 고난이 예상된다..

ajax랑 조금 더 친해져보자.. 화이팅..