textarea 커서 이상한 위치에서 깜빡일 때 해결법

textarea 마우스 커서 위치 조정하는 방법 (댓글/방명록 문제 해결)

 

댓글이나 방명록을 쓰려고 마우스 커서를 갖다대면 맨 왼쪽 위에서 시작해야 할 텍스트 입력 커서가 이상한 위치에서 깜빡거렸다.

딱히 댓글이나 방명록을 쓰는 사람도 없어서 몇 년을 그냥 냅뒀었음

 

그런데 요새 블로그 스킨을 이것저것 수정하다 보니, 이 문제도 해결하고 싶어졌다.

확인해봤는데, 진짜 답이 너무 간단한 곳에 있었음.

 

챗gpt에게도 물어봤는데 자꾸 이상한것만 고치라하고 엉뚱한 답변만 줌

 

문제 원인: HTML 구조
댓글 입력창의 HTML을 보면 이렇게 되어 있음

 

 

이 상태로 두면 마우스 커서를 가져다 댔을 때, 커서가 이상한 위치에서 깜빡거림.

진짜 이유는 textarea 태그 안에 불필요한 공백이 있었기 때문

 

 

해결 방법: 불필요한 공백 제거

textarea 태그를 아래처럼 바꾸면 됨

 

 

태그 안에 공백이 없어야 함!

공백이 있으면 텍스트 입력 커서가 맨 왼쪽 위가 아닌 그 공백만큼 애매한 위치에서 시작된다.

 

적용 후 결과

 

 

수정 전: 커서가 이상한 위치에서 깜빡임

수정 후: 커서가 텍스트 영역의 맨 왼쪽 위에서 깜빡임 (정상 작동)

 

 

추가 팁

혹시 이렇게해도 안된다면 HTML 수정 외에도 CSS 설정을 확인하기!

padding, line-height, text-align 등이 커서 위치에 영향을 줄 수도..

하지만 대개는 HTML 태그 안의 공백만 고쳐도 해결될 확률이 높지 않을까 싶다.

 

비슷한 문제를 겪는 사람들에게 도움이 되기를 바랍니다.