현재/JavaScript

글자 수 체크 및 카운트

청소부 2021. 4. 1. 14:27

1. 개요

 1) 이벤트 등록 페이지 내 글자 수 체크해서 카운트 해주는 이벤트

 

2. 구현

 1) js

$('#evButtonName').on('keyup', function(){
   // 글자수 카운트
   $('#buttonNameCountChk').html("("+$(this).val().length+ " / 10)");

   // 10자까지만 표현
   if($(this).val().length > 10) {
      $(this).val($(this).val().substring(0, 10));
      $('#buttonNameCountChk').html("(10 / 10)");
   }
});


 2) html

<td class="input">	
   <input type="text" id="evButtonName" name="evButtonName" class="ui-input" title="버튼명 입력" placeholder="10자 이내로 입력" maxlength="10" value="${evEvent.evtBenefitApplyButton}">
   <span>
      <ul class="td-text-list">
         <li id="buttonNameCountChk">(0 / 10)</li>
      </ul>
   </span>
</td>