이번에 게시판 댓글을 에디터가 아닌 textarea로 작업했습니다.

글 작성시 자동으로 늘어나는 기능이 필요해서 찾아봤습니다.

참조1의 경우

<textarea id="newTweetContent" placeholder="What's happening?" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>

<script>
function resize(obj) {
    obj.style.height = '1px';
    obj.style.height = (12 + obj.scrollHeight) + 'px';
}
</script>
<style>

textarea {
    min-height: 5rem;
    overflow-y: hidden;
    resize: none;
}
</style>

이렇게 코드가 되어있었는데 스크이 계속 생기는게 맘에 안 들어서 좀 더 찾아봤습니다.

참조2의 경우

var textEle = $('.commentEditor');
function adjustHeight() {
    textEle[0].style.height = 'auto';
    var textEleHeight = textEle.prop('scrollHeight');
    textEle.css('height', textEleHeight);
}
adjustHeight();
textEle.on('keyup', function() {
    adjustHeight();
});

좀 더 예쁘게 잘 동작하는 거 같아서 이렇게 수정했습니다.

참조

1. https://velog.io/@seungsang00/HTML-JacaScript-%ED%95%A8%EC%88%98%EB%A1%9C-textarea-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99%EC%A1%B0%EC%A0%88%ED%95%98%EA%B8%B0

2. https://webisfree.com/2015-11-03/textarea-%ED%83%9C%EA%B7%B8-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EC%A1%B0%EC%A0%88%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

문제점...

전체 화면 스크롤 영역 안에서일 경우는 괜찮은데,

전체 화면 스크롤보다 해당 코멘트 창이 늘어날 경우는 계속 포커싱이 해당 코멘트창으로 잡혀져버려서 아래에 타이핑되는 현재 글을 확인할 수가 없음...

ajax로 처리하면 될 거 같기도 한데 그냥 에디터로 변경해야지 ㅠ

https://velog.io/@iamjoo/figma-to-zeplin-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0#zeplin