HTML의 textarea 요소에서는 기본적으로 Tab 키를 누르면 포커스가 다른 요소로 이동하는데, 이를 들여쓰기를 위해 사용하려면 자바스크립트를 이용해 Tab 키의 동작을 수정할 수 있습니다.
다음은 Tab 키를 눌렀을 때 textarea 내에서 들여쓰기 기능을 구현하는 예제입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Tab 들여쓰기</title>
<style>
textarea {
width: 100%;
height: 200px;
font-family: monospace;
font-size: 16px;
}
</style>
</head>
<body>
<textarea id="myTextarea" placeholder="여기에 작성하세요..."></textarea>
<script>
const textarea = document.getElementById('myTextarea');
textarea.addEventListener('keydown', function(event) {
// Tab 키의 keyCode는 9입니다
if (event.key === 'Tab') {
event.preventDefault(); // 기본 Tab 동작(포커스 이동)을 방지
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
// 커서 위치에 탭을 삽입
textarea.value = textarea.value.substring(0, start) + '\t' + textarea.value.substring(end);
// 커서 위치를 탭 뒤로 이동
textarea.selectionStart = textarea.selectionEnd = start + 1;
}
});
</script>
</body>
</html>
설명:
- textarea.addEventListener('keydown', function(event) {...});: textarea에서 키를 눌렀을 때 이벤트를 처리합니다.
- if (event.key === 'Tab') {...}: Tab 키가 눌렸을 때만 동작하도록 합니다.
- event.preventDefault(): 기본 동작인 포커스를 다른 요소로 이동하는 것을 막습니다.
- 커서 위치(selectionStart와 selectionEnd)를 기준으로 \t (탭 문자)를 삽입합니다.
- 삽입된 후 커서 위치를 탭 뒤로 이동시켜줍니다.
이 코드를 사용하면, textarea 내에서 Tab 키를 누를 때마다 커서 위치에 들여쓰기를 추가할 수 있습니다.
'자바풀스택 과정 > 챗지피티 선생님 in 자바풀스택' 카테고리의 다른 글
| 챗 지피티에게 물어본 DBA와 권한 개발, 개발 기본 세팅 등 (0) | 2025.04.14 |
|---|---|
| 챗지피티에게 물어본 리액트의 StrictMode와 리액트 실행 (0) | 2025.04.07 |
| 챗지피티에게 물어본 createBrowserRouter와 createHashRouter의 같은점과 다른점 (0) | 2025.03.07 |
| 챗지피티에게 물어본 Entity 사용과 데이터베이스 사용의 차이(장단점) (0) | 2025.03.04 |
| 챗지피티에게 물어본 Entity를 Dto로 바꿔서 사용해줘야 하는 이유 (0) | 2025.03.04 |