not bad 한 개발

jQuery - 최소 입력타수 기능 본문

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;
        }
    });
});
저작자표시

'Web > jQuery' 카테고리의 다른 글

jQuery - 일정 시간이 지나면 css 변환  (0) 2022.04.07
jQuery - 최대 입력타수 기능  (0) 2021.12.30
jQuery - 인원 수 제한 버튼 만들기  (0) 2021.12.30
jQuery - datepicker 디자인 바꾸기  (0) 2021.12.29
jQuery - datepicker 달력구현  (0) 2021.12.29
'Web/jQuery' Related Articles more
Comments