본문 바로가기
Font-End/Javascript 자바스크립트

글자수 count 만들기, textarea 최소 글자수 설정

by Junmannn 2024. 1. 27.
반응형

See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen.

해당 포스팅은 Textarea 에서 최소 길이의 입력을 설정하고 해당 길이 이상일 경우에만 버튼이 활성화가 되는 코드를 만드는 코드를 다룹니다.

 

조건

1. textarea 에 입력사항은 띄어쓰기를 포함해 총 100 글자 이상이어야 한다

2. 현재 몇 글자인지 표시해야한다

3. 100 글자 이상, 이하에 대한 판단하기 쉬운 시각적 표현이 있어야 한다

4. 100 글자 이상일 시에만 저장 버튼이 활성화 되어야 한다

5. reset 버튼을 누를 시 textarea와 count가 초기화 되어야 한다

 

 

 

[textarea 에 변화가 있을 시 적용하는 코드]

$('textarea').on('input', function() {
    
    var characterCount = $(this).val().length,
        current = $('#current'),
        theCount = $('#the_count');
        
    current.text(characterCount);
    
    if (characterCount >= 100) {
        // 100 글자 이상이라면 글자 색을 바꿔주고
        current.css('color', '#4CB9E7');
        current.css('font-weight','bold');
        theCount.css('font-weight','bold');
        // 버튼을 활성화 시켜줍니다
        document.getElementById("attend_submit_button").disabled = false;
    } else {
        // 반대로 변화를 감지한 경우 글자수가 100자가 안된다면
        current.css('color','#FF004D');
        theCount.css('font-weight','normal');
        // 버튼을 다시 비활성화 시켜줍니다
        document.getElementById("attend_submit_button").disabled = true;
    }

    
});

 

 

[reset 버튼을 눌러 초기화 시키는 코드]

function resetTextarea() {
    document.getElementById('counting_textarea').value = '';
    $('#counting_textarea').trigger('input'); // input 이벤트를 트리거하여 변경 감지
}
반응형