댓글 입력폼 높이 변경 하기

사이트 활용팁

2024.11.05 16:35

댓글 입력폼 높이 변경 하기

관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 오래 전 2024.11.05 16:35 인기 디자인|게시판| 목록|
280

4

댓글 입력창 높이 개선 업데이트

댓글 입력 시 사용자 편의성을 높이기 위해 댓글 입력창의 기본 높이가 개선되었습니다. 이제 댓글 입력창이 더욱 간결하고 효율적으로 사용될 수 있습니다.

기본 높이 최소화: view_comment.skin.php 파일과 style.css 파일에서 댓글 입력창(textarea)의 기본 min-height 및 height 속성값이 150px에서 65px로 변경되었습니다.
자동 높이 조절 유지: 사용자가 댓글 내용을 입력함에 따라 입력창의 height가 scrollHeight에 맞춰 자동으로 늘어나도록 하는 기능은 기존과 동일하게 유지됩니다.

이번 업데이트로 댓글 입력창이 화면 공간을 덜 차지하면서도, 필요한 경우 자동으로 확장되어 더욱 효율적인 공간 활용과 깔끔한 인터페이스를 제공합니다.

아래의 파일명 및 소스코드 참조

// view_comment.skin.php
// this.style.minHeight = '150px'; 를 this.style.minHeight = '65px'; 로 변경
<textarea id="wr_content" name="wr_content" maxlength="10000" required title="댓글" placeholder="댓글 내용을 입력해주세요." onkeyup="check_byte('wr_content', 'char_count');" <?php if ($is_guest) { ?>style="padding-bottom:60px !important;"<?php } ?>><?php echo $c_wr_content; ?></textarea>
...
...
...
    $(document).ready(function() {
        $('#wr_content').on('input', function() {
            this.style.height = 'auto'; /* 높이를 자동으로 설정합니다. */
            this.style.height = (this.scrollHeight) + 'px'; /* 스크롤 높이를 textarea에 적용합니다. */
            this.style.minHeight = '150px';
        });
    });

// style.css 파일
// height : 150px 를 65px 로 변경
.rb_bbs_wrap .bo_vc_w textarea {font-size:14px !important; border-radius: 0px; resize: none; height:150px; margin-top: 30px; background-color: #f9f9f9; padding: 15px !important; padding-right: 70px !important; box-sizing: border-box; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; border:1px solid #ddd; font-size: 16px; color:#000; box-shadow: none; line-height: 100%; overflow: hidden;}

#댓글 #textarea #댓글쓰기 #댓글창높이 #댓글높이

PDF

인쇄

공유하고, 소통하다

빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. ... 자세히보기

또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기

주의사항.

본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. ... 자세히보기

또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.

본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기

이전글상단 메뉴에 새글 아이콘 노출 하기2024.11.06