1. 게시판 여분필드와 자바스크립트 : text > 그누보드5 팁자료실

그누보드5 팁자료실

1. 게시판 여분필드와 자바스크립트 : text 정보

1. 게시판 여분필드와 자바스크립트 : text

본문

우리는 보통 게시판의 여분필드를 줄 때 아래처럼 코드를 줍니다.

input 의 디폴트 type 은 text 이므로 type="text" 는 생략이 가능합니다.

 


<input id="wr_1" name="wr_1" value="<?php echo $write['wr_1']; ?>">

 

-----

 

이걸 자바스크립트로 처리하면 아래처럼 됩니다.

 


<input id="wr_1" name="wr_1">
.
.
.
<script>
wr_1.value = "<?php echo $write['wr_1']; ?>";
</script>

 

----------

 

자바스크립트를 상단에 위치시키려면 아래처럼 해 주면 되겠죠?

 


<script>
document.addEventListener("DOMContentLoaded", () => {
    wr_1.value = "<?php echo $write['wr_1']; ?>";
} );
</script>
.
.
.
<input id="wr_1" name="wr_1">

 

----------

 

그렇다면 왜 굳이 자바스크립트로 처리하는 것이 편할까요?

바로 원본 write.skin.php 의 코드를 건드리지 않으려는 생각 때문에 그렇습니다.

다시 말하자면 최상단에 위치시키면 write.head.skin.php 에, 최하단에 위치시키면 write.tail.skin.php 에 저 코드를 주면 굳이 write.skin.php 를 건드리지 않고도 충분히 그것이 가능하기 때문입니다.

 

예를 들어서 pc basic 스킨의 write.tail.skin.php 에 아래의 코드를 입력해 주면

원본 스킨을 건드리지 않고도 아주 훌륭하게 여분필드가 만들어지는 걸 알 수 있을 것입니다.

 


<script>
document.querySelector("#bo_w .bo_w_tit").insertAdjacentHTML("afterend", "<input id='wr_1' name='wr_1'>");
wr_1.value = "<?php echo $write['wr_1']; ?>";
</script>

 

31845957_1678111677.0778.jpg

 

여기서 #bo_w .bo_w_tit 는 제목을 표시하는 영역을 의미합니다.

이건 이미 정의해준 id 나 class 로 접근하는 가장 유용한 방법입니다.

css 에서 매우 자주 나오는 형태이므로 css 를 어느 정도 습득하신 분이라면 금방 이해가 가실 거에요.

타이틀 영역 바로 다음("afterend")의 형제태그로 <input> 를 insertAdjacentHTML 메서드를 이용하여 동적으로 추가하라의 뜻입니다.

추천
8

댓글 12개


게시글의 여분필드만 어느정도 내맘대로 할 수준이 되면 그누가 재미있어 집니다.
코어를 건드리지 않는 것이 가장 좋아요.
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT