jQuery Mobile 텍스트영역 — textarea cols, rows 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 텍스트영역 —
textarea, cols, rows 완전 정리

긴 글을 여러 줄로 받아내는 입력 박스

시작 오늘 분석할 코드

input은 한 줄짜리 입력이지만 textarea는 여러 줄이다. fieldcontain으로 감싸 label과 함께 정렬한다.

<div data-role="fieldcontain"> <label for="txtarea1">도시설명</label> <textarea cols="25" rows="5" id="txtarea1"></textarea> </div>

실제 출력 미리보기

header 영역

도시설명

footer 영역

---

용어 핵심 키워드

textarea여러 줄 텍스트 입력 — input의 long 버전

cols가로 너비 — 글자 단위 (대략적)

rows세로 줄 수 — 보이는 줄 수

자동 높이 늘림jQM은 글이 길어지면 자동 확장

---

1 input vs textarea

<input type="text">

한 줄 — 줄바꿈 안 됨
제목, 이름, 검색어용

<textarea>

여러 줄 — 줄바꿈 OK
본문, 댓글, 설명용

---

2 cols와 rows

두 속성은 표시 크기를 정한다 — 입력 가능한 문자 수 제한이 아니다.

• cols="25" — 가로 방향으로 약 25글자 폭
• rows="5" — 세로 방향으로 5줄이 한 번에 보임
• 이 크기를 넘는 글도 입력 가능 — 그냥 스크롤이 생긴다

⚠ jQM에서는 cols 무시 — jQM은 textarea의 폭을 부모 너비로 100% 늘린다. cols 속성이 사실상 무시된다. 대신 rows는 초기 높이를 결정한다.

---

3 jQM의 자동 높이 확장

일반 HTML textarea는 입력해도 크기가 그대로다 — 글이 많으면 내부 스크롤. jQM은 입력에 따라 textarea가 자동으로 길어진다. 사용자가 한눈에 볼 수 있다.

• 처음에는 rows만큼 높이
• 줄이 늘어날 때마다 자동으로 한 줄씩 더 확장
• 모바일에서 스크롤 없이 글 전체 미리보기 가능

---

 

반응형

 

4 글자 수 제한 — maxlength

입력 문자 수를 제한하려면 별도 속성을 쓴다. cols/rows는 시각적 크기일 뿐 제한 기능이 없다.

<textarea maxlength="500" id="comment"></textarea> <textarea minlength="10" required></textarea>

---

5 초기 텍스트 — input과 다른 점

input은 value="…" 속성으로 초기값을 넣는다. textarea는 다르다 — 태그 사이에 텍스트를 직접 쓴다.

// input <input type="text" value="초기값"> // textarea <textarea>초기값</textarea>

⚙ 줄바꿈 주의 — 태그 안의 줄바꿈/공백이 그대로 textarea에 들어간다. 코드 들여쓰기가 입력으로 보일 수 있다.

---

6 자주 하는 실수

실수	증상	해결
닫는 태그 누락 (self-closing 시도)	이후 콘텐츠가 textarea 안으로 빨려들어감	꼭 <textarea></textarea>
cols로 입력 제한 기대	제한 안 됨 — 시각적 크기일 뿐	maxlength 사용
태그 사이 들여쓰기 공백	초기값에 공백 포함	태그 안엔 텍스트만 (또는 빈)
resize 못 하게 막기 원함	기본 OS는 우하단 핸들 표시	style="resize:none"
label 매칭 빠짐	접근성 저하	for와 id 매칭

---

7 추가 속성

• placeholder — 비어있을 때 안내
• required — 빈 채로 submit 막음
• readonly — 읽기 전용 (값 전송됨)
• disabled — 잠금 (값 전송 안 됨)
• spellcheck — 맞춤법 검사 끄기/켜기
• wrap="hard" — 줄바꿈을 \n으로 저장

---

8 현대식 대안

HTML5 표준 textarea는 그대로 쓴다. 자동 높이 확장은 CSS+JS로 직접 만든다. 또는 contenteditable div로 풍부한 편집기 (rich text editor)를 만든다 — Quill, TinyMCE, Slate 등.

// JS로 자동 높이 — 입력할 때마다 scrollHeight에 맞춤 textarea.addEventListener('input', () => { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; });

---

핵심 한 줄 요약

textarea여러 줄 텍스트 입력

cols / rows표시 너비/높이 (제한 X)

jQM 자동 확장글 늘어날 때마다 높이 ↑

초기값태그 사이에 텍스트 (value 아님)

제한maxlength / minlength

닫는 태그 필수</textarea> 빠뜨리면 큰 사고

Tags

#jQuery-Mobile #textarea #cols #rows #maxlength #minlength #자동확장 #다줄입력 #폼 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, textarea, cols, rows, maxlength, minlength, 자동확장, 다줄입력, 폼, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리