플레이스홀더 방식:
저(그리고 다른 분들도?)가 기대하는 것은 폼의 플레이스홀더처럼 작동하는 것입니다(즉, 개별 폼 요소가 있는 경우를 의미합니다).
현재 기본 동작 방식은 제가 작성한 것처럼(“name”, “location”, “issue” 등) 폼의 다른 섹션을 나열할 수 있게 해줍니다. 하지만 기본 템플릿 동작 방식은 이전에 언급했던 것과 동일한 문제점을 가지고 있습니다. 마크다운이 혼란을 유발하고 사용자가 쉽게 형식을 깨뜨릴 수 있기 때문입니다.
이상적인 형태는 일반적인 폼처럼 각 섹션(이름, 위치, 문제)에 플레이스홀더가 있는 형태라고 생각합니다. 다만 (여기가 차이점입니다) 각 섹션은 독립적으로 작동해야 합니다. 즉, 사용자가 이름 섹션을 클릭하면 "name"이라는 플레이스홀더는 사라지지만, 사용자가 다른 섹션도 클릭할 때까지 나머지 섹션은 그대로 유지되어야 합니다.
이것이 jquery를 통해 가능할 것 같습니다(?). 각 섹션에는 고유한 id가 포함된 div가 있어야 하며, 사용자가 해당 div를 클릭할 때 jquery를 이용해 해당 id의 텍스트를 표시하거나 제거할 수 있어야 합니다. 하지만 이를 위해서는 textarea 안에 div를 추가해야 하는데, 어떻게 해야 할지 잘 모르겠습니다.
저는 여기에서 그 방법을 조사하고 있습니다.
템플릿 방식
대안으로, 사용자가 클릭해도 섹션 헤더가 “사라지지” 않는 방식이 있을 수 있습니다. 즉, 섹션 헤더(예: Name, Location, Issue)는 페이지에 계속 남아 있는 텍스트가 됩니다. 현재 템플릿 기본 방식과 비교했을 때, 더 폼처럼 보이게 하려면 다음과 같은 조치가 필요합니다:
- 섹션 헤더 텍스트는 사용자가 수정할 수 없어야 합니다(즉,
contenteditable="false"적용) - 섹션 구분점은 사용자가 제거할 수 없어야 합니다
- 섹션 헤더 아래에 사용자가 입력할 수 있음을 명확히 알 수 있는 공간이 있어야 합니다. 현재 기본 템플릿에서는 사용자가 텍스트가 있는 위치로 이동한 후
return키를 눌러 입력 공간을 만들어야 합니다.
아마 이것이 더 쉬운 방법일까요?