-
자바스크립트(JavaScript) Input text태그에 최소값 최대값 조건 실시간 반영하기 ! - 맨땅에 코딩개발 (dev)/Javascript 2022. 12. 25. 22:24
프로젝트를 진행하다가 실시간으로 input 태그에 범위 설정이 필요해서 만들어 보았습니다.
실시간 키보드 입력을 감지하기 위해서 Jquery를 꼭 임포트 해주어야 합니다.
최소값은 -60 최대값은 60으로 설정하였습니다.
<html 소스>
<!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" placeholder="범위내 숫자 입력"> </div> </body> </html><javascript 소스>
let min = -60; let max = 60; $("#text").on("propertychange change keyup paste input", function() { let currentVal = $(this).val(); let currentVal_type = Number($(this).val()); //숫자 말고는 입력 못하게 설정 if (isNaN(currentVal) == true) { // "-" 를 입력할수도 있기 때문에 - 문자는 허용 if(currentVal == '-') { return; } else { $(this).val(''); } } else { //값이 범위안에 있을때 if( currentVal >= min && currentVal <= max) { return ; } else{ $(this).val(''); } } });<결과 창>
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" placeholder="범위내 숫자 입력"> </div> <script> let min = -60; let max = 60; $("#text").on("propertychange change keyup paste input", function() { let currentVal = $(this).val(); let currentVal_type = Number($(this).val()); //숫자 말고는 입력 못하게 설정 if (isNaN(currentVal) == true) { // "-" 를 입력할수도 있기 때문에 - 문자는 허용 if(currentVal == '-') { return; } else { $(this).val(''); } } else { //값이 범위안에 있을때 if( currentVal >= min && currentVal <= max) { return ; } else{ $(this).val(''); } } }); </script> </body> </html>'개발 (dev) > Javascript' 카테고리의 다른 글