기본적으로 textarea에서 Tab 키를 누르면 다음 입력 필드로 포커스가 이동한다. 하지만 코드 편집기처럼 동작하도록 만들고 싶다면, Tab 키를 눌렀을 때 textarea 내부에 Tab 공백(\t)을 삽입하도록 설정할 수 있다.
keydown 이벤트를 활용해 Tab 키를 누를 때 textarea 내부에서 공백을 삽입하는 방법은 아래를 참고한다.
구현 설명 및 코드
설명
- keydown 이벤트를 감지하여 Tab 키가 눌렸는지 확인한다.
- event.preventDefault()를 호출하여 기본 동작(다음 입력 필드로 포커스 이동)을 막는다.
- selectionStart와 selectionEnd를 사용해 현재 커서 위치를 찾는다.
- 해당 위치에 \t(탭 문자)를 삽입한다.
- 커서를 추가된 Tab 문자 다음으로 이동시킨다.
코드
아래는 Tab 키를 눌렀을 때 textarea에 Tab을 추가하고, 커서 위치를 조정하는 코드다.
<textarea id="editor" rows="10" cols="50"></textarea>
<script>
document.getElementById("editor").addEventListener("keydown", function (event) {
if (event.key === "Tab") {
event.preventDefault(); // 기본 동작 방지 (포커스 이동 방지)
let textarea = event.target;
let start = textarea.selectionStart;
let end = textarea.selectionEnd;
// 현재 커서 위치에 탭 추가
let value = textarea.value;
textarea.value = value.substring(0, start) + "\t" + value.substring(end);
// 커서를 추가한 탭 이후로 이동
textarea.selectionStart = textarea.selectionEnd = start + 1;
}
});
</script>Nullvuild
@nullvuild