-
자바스크립트(JavaScript) Input text태그에 MM-DD 조건 실시간 반영하기 ! - 맨땅에 코딩언어/JavaScript 2022. 12. 25. 22:36
프로젝트를 진행하다가 실시간으로 input 태그에 범위 설정이 필요해서 만들어 보았습니다.
실시간 키보드 입력을 감지하기 위해서 Jquery를 꼭 임포트 해주어야 합니다.
<입력 조건>
- mm-dd 형식만 입력이 되게 설정하였습니다.
- 숫자 네글자를 입력하면 자동으로 mm-dd 형식으로 바뀝니다.
- 숫자 외 다른문자 입력안되게 설정
<결과>
Document <전체소스>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <title>Document</title> </head> <body> <div class="form-group form-focus"> <input id="text"type="text" value="00-00"> </div> <script> $("#text").on("propertychange change keyup paste input", function() { let currentVal = $(this).val(); let currentVal_type = Number($(this).val()); // 문자열이 5글자 이상 갈 경우 존재하지않음 if ( currentVal.length < 6 ) { // 문자열이 4글자인데 숫자만 있을때 가운데에 "-"를 넣어줌 if( currentVal.length == 4 ) { //문자열이면 if ( isNaN(currentVal_type) == true ) { return; } //숫자면 else { currentVal = $(this).val( currentVal.slice(0,2) + "-" + currentVal.slice(2,4) ); } } // 5글자가 되었을때 검사 if ( currentVal.length == 5 ) { // 가운데 문자가 "-"가 아닐경우 (처리) if( currentVal[2] != "-" ) { $(this).val(""); } // 가운데 문자 외 나머지 문자들 (처리) for ( let num = 0; num < 5; num++ ){ if ( num == 2 ) { continue } if ( isNaN(Number(currentVal[num])) == true ) { $(this).val(""); } } } } else { $(this).val(currentVal.substring(0, currentVal.length - 1)); } }); </script> </body> </html>