[TIL] 채팅 프론트 수정(1) - 공백 방지, 줄바꿈 살리기, 체크박스 disabled, 말줄임표시

오늘 한 일

1. textarea로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기
채팅창에 친 메세지를 msg_container에 담을 때 줄바꿈 처리를 간단히 css로 해결할 수 있었다. shift+enter를 눌러서 개행한 표시는 pre태그만 있어도 되지만, 문자가 길어서 div를 빠져나가는 문제를 방지하기 위해서는 white-space 를 pre-line으로 해야 긴 행이 wrap될 수 있다.

.msg_cotainer {
  white-space: pre-line;
}

2. 미입력 또는 공백 입력 방지
띄어쓰기 한칸 뿐 아니라 여러칸의 공백까지 채팅창에 입력하는 것을 방지하기 위해서 다음과 같은 코드를 추가했다.

// yourMsg라는 Id를 가진 요소의 값
let msg = $("#yourMsg").val();

// 미입력 또는 공백 입력 방지
if (msg.replace(/\s|　/gi, "").length == 0) {
    $("#yourMsg").focus();
    return;
}

3. 추가된 체크박스만 값을 넘겨주기
체크박스의 상태가 disabled이면 controller에서 name으로 값을 받을 수가 없다고 한다! 프론트쪽에서 기존 채팅방에 있던 인원의 목록을 넘겨주지 않을까 고민했는데, 기존인원의 목록을 수정할 수 없게 하면서, 값도 넘겨주지 않아서 한번에 문제가 해결되었다.

// 체크박스를 수정할 수 없도록 상태를 disabled로 수정
// setTimeout을 안쓰면 어떨 때는 동작을 안함...
function disableCheckbox(code) {
    setTimeout(function () {
        $("#checkbox"+code).attr("disabled", true);
    }, 400);
}

4. 말줄임표시
4.1. javascript로 표현하는 방법

var length = 13; // 표시할 글자수 기준
if (temp.length > length) {
  temp = temp.substr(0, length-2) + '...';
}

4.2. css로 표현하는 방법

/* 긴 대쉬보드명이 오는 경우에 "..." 표시를 위함 */
.Button.dashboard-menu {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

나는 javascript로 했는데 css로 하는 것이 더 간결해보인다. 내일 다시 시도해 보기로 한다.

Reference

https://offbyone.tistory.com/326

https://pro-pennek.tistory.com/entry/jQuery-textarea에-입력된-값-깔끔하게-정리하기

https://m.blog.naver.com/pjj256/221622703922

https://pureainu.tistory.com/273