contenteditable div에 placeholder추가하기

오늘은 팀프로젝트를 준비하던 중 placeholder에 대해 배운 새로운 사실들을 간단히 기록으로 남기려 한다.

게시판 글쓰기 페이지에서 Texteditor를 만들 던 중  Texteditor에서는 글자입력란을 textarea를 이용해서 만들지 않고 

div태그로 만든다는 사실을 알았다.

+ 아래 사진은 내가 만든 texteditor이다.

보통 우리는 글을 입력하는 란을 만들때 input or textarea태그를 적용한다. 그러나 div를 이용해서도 텍스트 입력란을

만들 수 있다. 바로 div에 contenteditable속성으로 만드는 것인데,

여기서 내가 직면한 문제점이 글자 입력란에  placeholder속성을 사용해 "내용을 입력해 주세요"라는 문구를 넣고 싶은데

 placeholder는 input이나 textarea 태그인 경우에만 사용할 수 있다.

솔루션을 찾기 위해 구글링을 하기 시작했다. 역시 나와 동일한 문제에 직면한 사람들이 있었다.

 

+ solution

 

1. 먼저 div태그  placeholder에 원하는 내용을 입력한다.

ex ) <div contenteditable="true" placeholder="내용을 입력해 주세요">

2.  css에 아래 코드만 넣어주면 된다.

   [contentEditable=true]:empty:before {
    content: attr(placeholder);
 

3. css에 간단한 코드만 입력하니 아래 사진처럼 "내용을 입력해 주세요"라는 문구가 보인다.

 

+느낀점

어떤 정의된 문제에 대해서 나만 고민하지 않고 다른 사람도 나와 같은 문제에 직면하기 때문에 방법을 찾고자 한다면 시간과 노력을 투자해서 얼마든지 해결책을 찾아 갈 수 있다는 점을 다시 한번 느꼈으며 처음에 풀리지 않아 고민했던 부분들이 해결이 되면서 큰 성취감을 느낄 수 있었다.