카드 에디터에서 텍스트 입력과 관련된 오류를 해결한다. about phoca-review HOT 1 CLOSED

해결법 (View 관련)

카드 콘텐츠를 미리 보여주는 영역에 다음과 같이 설정해 해결

white-space: pre-line;
word-wrap: break-word;

엔터로 줄바꿈 반영 안되는 문제

• white-space: 공백과 줄바꿈을 어떻게 처리할 지에 대한 속성. pre-line은 공백 여러개는 무시, 줄바꿈은 반영.

길게 이어진 영단어가 다음줄로 줄바꿈되지 않는 현상

• word-wrap: 띄어쓰기가 없는 단어를 다음줄로 보낼지 말지에 대한 속성. break-word로 띄어쓰기가 없는 긴 단어면 길이에 맞게 내려가도록 설정
• 참고로 word-break라는 줄바꿈을 단어 단위로 할까 글자 단위로 할까 하는 설정이 있는데, CJK(한중일)어는 글자단위로 줄바꿈하는 것이, 영어는 단어 단위로 줄바꿈 하는 것이 기본값이다. word-wrap: break-word로는 띄어쓰기가 없는 긴 영단어가 줄바꿈이 안되는 문제를 해결하기 위한 것이다.

해결법 (글자수 제한 관련)

일반상황에서는 maxLength로 제한 잘 되는데 글자 복붙해 넣거나 포커스 바깥으로 이동후 다시 포커스해서 입력하면 글자가 입력되는 현상이 발생했었음

• onChange 이벤트는 setState하는 역할만 하도록 하고, input에 onKeyUp 이벤트를 붙여서 e.target.value의 length가 정해놓은 길이를 넘으면 substring으로 value를 잘라 state에 업데이트 하도록 해서 해결

from phoca-review.