반응형
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 이벤트를 트리거하여 변경 감지
}
반응형
'Font-End > Javascript 자바스크립트' 카테고리의 다른 글
js array 특정 필드로 정렬, 자바스크립트 배열 정렬 (0) | 2022.04.07 |
---|---|
자바스크립트 javascript 문자열 관련 함수 정리 (0) | 2022.02.05 |