input 값 공백 막기

1. 기능

조건문으로 $('#chat-input').val() == '' )일 경우 고려해준다

예시

$('#send').click(() => {
  if ( $('#chat-input').val() == '' ) {
    console.log('공백X');
  } else {
    (인풋 값이 공백 아닐 시 실행할 코드)
  }
});

2. 디자인

인풋 값이 공백일 시 send 버튼의 투명도 0.5
공백 아닐시 1.0

고려해야할 상황

1. 페이지 렌더 시 초기값
2. 인풋에 값 입력 후 지운 경우
3. 메세지 보낸 후

1. 초기값에 CSS 설정

<img src="./../img/icon/send.svg" class="ic-sm my-auto" id="send" style="opacity: 0.5" />

2. 인풋 값 여부에 따라 CSS 변경해주는 함수 만든다.

  function disableSend() {
      if ($('#chat-input').val() == '') {
        console.log('공백');
        $('#send').css('opacity', '0.5');
      } else {
        console.log('공백 아님');
        $('#send').css('opacity', '1.0');
      }
    }

3. 전송 후 동작 처리하는 함수에 CSS값 변경 코드도 넣어주기

function sendMsg() {
      // DB에 저장할 데이터
      if ($('#chat-input').val() == '') {
        console.log('공백X');
      } else {
        db.collection('chatroom')
          .doc(chatroomID)
          .collection('messages')
          .add(data)
          .then(() => {
            console.log(chatroomID + ' 채팅방에 메세지 저장 완료');
            // 전송 후 input 비운다
            $('#chat-input').val('');
            $('#send').css('opacity', '0.5');

            scrollBottom();
          });
      }