textarea에서 enter로 줄바꿈 input 받기
1.기본 기능으로 줄바꿈 받기
<textarea cols="100" wrap="hard" style="white-space: pre-wrap"
name="cover_letter"id="cover"
placeholder="나에 대해 자유롭게 설명하고 채용기회의 확률을 높이세요"></textarea>
🟠 wrap="hard"
이력서 자기소개서 칸은 textarea로 받는 중이었는데 기본기능 wrap를 이용해서 받을 수 있다
wrap="hard"는 사용자가 입력한 줄바꿈을 실제로 텍스트에 포함시키며 enter를 누르면 줄바꿈 되도록 해준다
🟠 style="white-space: pre-wrap"
이건 css로 기능을 주는건데 텍스트의 공백과 줄바꿈을 처리하는 방식으로 사실 wrap="hard" 만 있어도 가능하다
2. 특수조건 - form 태그 안에 textarea가 있을때
- 기본적으로 form 태그가 있고 submit 기능이 있는 버튼이 있으면 enter 시 submit 되는 경향이 있음
- 그렇게 되면 줄바꿈 enter가 잘 안먹을 수 있다
//폼 제출 시 Enter 키 입력방치처리
$(formEl).on('keydown', function(event) {
if (event.keyCode === 13) {
const textarea = document.querySelector('#cover'); // textarea의 id를 사용하여 선택
if (event.key === 'Enter' && document.activeElement !== textarea) {
event.preventDefault(); // textarea가 아닌 경우에만 기본 동작 방지
}
}
});- 자바스크립트를 활용해서 직접 입력 방지를 해준다
- keycode ==13 은 enter를 의미한다. 여기서 textarea를 제외한 동작만 event.preventDefault()를 사용해 기본 동작을 방지한다.
