제이쿼리를 이용한 textarea 글자수 세기

 

제이쿼리를 이용한 textarea 글자수 세기

Textarea에 입력되는 글자의 수를 계산하는 프로그램. 

 

제이쿼리 1.12.4 버전을 이용하였다.

 

길이를 구하는 코드 lenght를 이용하여 글자수를 계산하였다.

 

정규식과 replace를 이용하여 띄어쓰기, 공백, 줄바꿈을 제거하는 기능을 추가하였다.

 

최대한 쉽게 구성하였으니 아래의 코드를 참고해서 만들면 된다.

 

 

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<h1>글자수 계산기</h1>
<textarea class="text_area" placeholder="텍스트를 입력해 주세요"></textarea>

<div class="info">
	<h3>※모든글자 1글자로 계산※</h3>
	<div>
		<p>띄어쓰기 줄바꿈 포함
		<span id="counter">0</span> 자</p>
	</div>
	<div>
		<p>띄어쓰기 줄바꿈 제외
		<span id="counter_space">0</span> 자</p>
	</div>
</div>

css

*{
  margin: 0;
  box-sizing:border-box;
}

body{
  background: rgb(232 232 232);
}

textarea{
  width:90%;
  height:30vh;
  min-height: 200px;
  padding: 1%;
  margin:auto;
  margin-top:2%;
  display:block;
  outline:none;
  border: 1px solid #dadada;
}

h1{
  width:90%;
  margin:auto;
  display:block;
  padding-top: 2%;
}

p,h3{
  padding: 1%;
  width:100%;
  margin:auto;
  display:block;
}

.info{
  border:1px solid #dadada;
  background:white;
  width:90%;
  margin:auto;
  margin-top:2%;
}

js

$('.text_area').keyup(function (e){
    var content = $(this).val();
    $('#counter').text(content.length); 
  
    var redex = /\s/ig; 
    var blank = $(this).val().toString().replace(redex, "").length; 
    $('#counter_space').text(blank); 
});