Textarea Tab 들여쓰기 구현

Textarea Tab 들여쓰기 구현

소스예제

Tag And Script

<textarea class="frm_input frm_ex_textarea" rows="10" placeholder="내용을 입력하세요" style="width:100%; height:300px;"></textarea>

<script>
$(function(e){
	$(document).on('keydown', 'textarea.frm_ex_textarea', function(e) {
		if (e.keyCode === 9) { // Tab 키 코드
			e.preventDefault(); // 기본 탭 동작(포커스 이동) 방지
			var $domTextArea = $(this)[0];
			var start = $domTextArea.selectionStart, end = $domTextArea.selectionEnd;
			var value = $domTextArea.value;
			var selectedText = value.substring(start, end);// 선택된 텍스트
			var tab = "    "; // 4개 공백 또는 '\t' 문자

			// 블록 지정된 경우, 각 라인마다 탭 추가 (선택 사항)
			if (selectedText.includes('\n')) {
				var lines = selectedText.split('\n');
				var indentedText = lines.map(function(line) {
					return tab + line;
				}).join('\n');
				$domTextArea.setRangeText(indentedText, start, end, 'select');
			} else {
				// 단일 라인 또는 공백 1개 삽입
				$domTextArea.setRangeText(tab, start, end, 'end');
			}
		}
	});
});
</script>