Web/jQuery
jQuery - 최소 입력타수 기능
leebean
2021. 12. 30. 22:30
https://juniorprogram.tistory.com/51
jQuery - 최대 입력타수 기능
최대 입력 타수 기능은 쇼핑몰 혹은 호텔 등에서 한 번쯤 보셨을 기능입니다, 주로 문의사항이나 환불 요청 등에 사용되는 기능인데 프로젝트를 진행하던 중 단순히 문의사항만 있으면 좀 허전
juniorprogram.tistory.com
위의 포스트는 전에 작성했던 문자를 입력하면 몇 타를 쳤는지 확인이 가능하고 일정 타수를 넘어가면 제한이 되는 코드입니다. 이번에는 반대로 일정 타수 이상을 입력해야만 기능이 열리는 코드를 구현해보았습니다.
github : https://github.com/delight-HK3/input_least
GitHub - delight-HK3/input_least: UTF-8 encoding required
UTF-8 encoding required. Contribute to delight-HK3/input_least development by creating an account on GitHub.
github.com
(jQuery파일도 함께 첨부했습니다.)
HTML
<htm1>
<head>
<meta charset="utf-8">
<script src="/js/jquery-3.6.0.js"></script>
<script src="/js/input_least.js"></script>
</head>
<body>
<textarea id="least" cols="50" rows="5" style="padding:10px"></textarea>
<p id="least_count">( 0 ) 최소 30자 이상 입력해야합니다.</p>
<button id="least_button" style="width:100px; height:30px; font-size:20px">input</button>
</body>
</htm1>
jQuery
$(document).ready(function(){ // html파일이 로딩되기전에 시작
const target = document.getElementById('least_button');
// least_button 이름의 id를 가지고 있는 태그를 target에 저장
target.disabled = true; // 시작할때 비활성화
$('#least').on('keyup', function() {
$('#least_count').html("( "+$(this).val().length+" ) 최소 30자 이상 입력해야합니다.");
if($(this).val().length >= 30) { // 30타수 이상일 경우 실행
target.disabled = false;
// 30타수 이상일 경우 버튼의 비활성화를 해제
}
else{ // 30타수 이하일 경우 버튼을 비활성화
target.disabled = true;
}
});
});