INPUT 이벤트 자동 하이픈 추가

 

1. Html 

<input type="text" name="card" id="card" maxlength="20" style="width: 200px"/>

- maxlength="20" -> 총 20글자 입력

 

2. 이벤트 추가!

$(document).on("keyup", ".CLASS or #ID", function() {
     $(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/([0-9]{4})+([0-9]{4})+([0-9]{4})+([0-9]{4})$/,"$1-$2-$3-$4").replace("--", "-"));
    });

- ".CLASS or #ID" 에는 input 태그에 CLASS 나 ID 를 입력한다.

 

- 숫자 4자리 사이 에 자동 하이픈 추가 이벤트

- ex) xxxx - xxxx - xxxx - xxxx