$("#name-input").on("keydown", function() {

$(this).val($(this).val().replace(/[^\!-z]/g,""));

});

//글이 입력되면 #name-input과 #search-input의 색을 초록색으로 비어있다면 빨간색으로 표시

$('#name-input').on('input', checkInput);

function checkInput(){

var userName = $('#name-input').val();

if(userName === ''){//빈칸이라면 아래

$('#beforeNameInput2').css('color', 'rgba(255,41,86,1)');

$('#name-input').css('background-color', 'rgba(244,177,175,1)');//이름칸 속 색

$('#name-input').css('border-color', 'rgba(255,107,136,1)');//이름칸 테두리 색

$('#search-input').css('background-color', 'rgba(255,41,86,1)');//버튼 색

}else {//빈칸이아니라면 아래

$('#beforeNameInput2').css('color', 'rgba(11,182,140,1)');

$('#name-input').css('background-color', 'rgba(168,207,192,1)');//속 색

$('#name-input').css('border-color', 'rgba(11,182,140,1)');// 테두리 색

$('#search-input').css('background-color', 'rgba(11,182,140,1)');//버튼 색

}

}

위의 코드로 input값을 입력하면 button color 와 input text box color가 바뀌도록 진행하고있습니다.

영문자만 입력가능하며 input text box 가 비어있지않으면 초록색으로 input text box 비어있으면 빨간색으로 작동합니다.

모두 정상적으로 작동하는데 input text box 에 한글을 입력했다 지우게되면

안쪽에 아무것도 입력되어있지않고 비어있는데도 초록색으로 그대로 남아있습니다

영문의 경우에는 입력했다 지우더라도 빈칸이라면 빨간색으로 표시가되는데 말이죠

이런경우에는 어떤 설정을 더해주는게 좋을까요 고수님들의 의견이 너무 절실합니다.. ㅠ