직접 만들어 본 소수점 제한 라이브러리 소개

들어가기전

input의 값을 숫자 자릿수까지 체크하여 입력 제한하는 라이브러리를 찾던 중 마땅한 것이 없어 직접 개발하게 되었다.

Version

JQuery 3.3.1 기준으로 개발하였다.

  • JQuery 3.3.1 CDN
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

사용법

먼저 digitNumber.js 라이브러리를 해당 html에 임포트하자.

전체 소스 코드는 github에서 확인할 수 있다.

1. 타겟 지정

먼저 적용시킬 테이블의 id 값을 지정한다.

  • 반드시 id로 지정한다.
<table id="default">
    ...
</table>

2. 라이브러리 적용

자바스크립트에서 $(해당 table의 id).digitNumber();로 digitNumber 라이브러리의 함수를 호출한다.

  • $("#default").digitNumber();
$(document).ready(function(){
  $("#default").digitNumber();
});

3.자릿수 지정

자릿수를 제한할 input 태그의 클래스 명을 digitLimit로 지정한다.

  • .을 기준으로 제한할 자릿수가 결정된다.
  • 0.인 경우엔 앞자리에 0 이외의 다른 숫자 입력이 제한된다.
<input type="text" class="digitLimit1.2">
<input type="text" class="digitLimit1">
<input type="text" class="digitLimit0.2">
<input type="text" class="digitLimit.2">
<input type="text" class="digitLimit.">
<input type="text" >

옵션) 특정 input 입력 자릿수 제한 기능 제외

테이블 안에 input 입력의 숫자와 자릿수를 제한하는 기능을 제외하기 위해선, 매개 변수에 JSON 형식의 데이터로 notSelectors를 전달하면 된다.

$(document).ready(function(){
  var options = {
    // 기능 적용을 제외할 특정 seletors
    notSelectors:".notSelect, #notId"
  };
  $("#notSelect").digitNumber(options);
});

<table id="notSelect">
    ...
    <tr>
      <td> <input type="text" > </td>
      <!-- 제외 .notSelect -->
      <td> <input type="text" class="notSelect"> </td>
      <!-- 제외  #notId -->
      <td> <input type="text" id="notId"> </td>
    </tr>
</table>

옵션) 콤마 제거

전체 콤마 제거

$(document).ready(function(){
  var options = {
    // 콤마 제거
    comma : false
  };
  // 전체 콤마 제거
  $("#notComma").digitNumber(options);
});

<input type="text" value="" class="digitLimit4.4">

특정 콤마 제거

특정 input에 콤마를 제거하고 싶다면, 해당 클래스 명에 nComma를 추가하면된다.

$(document).ready(function(){
  // 특정 selector 콤마 제거
  $("#choiceNotComma").digitNumber();
});

<!-- nComma 추가 -->
<input type="text" value="" class="digitLimit4.4 nComma">