textrarea 관련 문의 드립니다

textrarea 관련 문의 드립니다

QA

textrarea 관련 문의 드립니다

본문

<ul class="list-group mb-3">
    <li class="list-group-item">

<table id="table10" style="width:100%;">
<tr>
<td>
        
            <label class="col-md-10 col-form-label" for="wr_subject">1.상품내용<strong class="sr-only">필수</strong></label>
<textarea id="wr_subject" name="wr_subject" required class="form-control required"  rows="10" placeholder="상품명을 입력해 주세요" ><?php echo $write['wr_subject'] ?>

</textarea>
        
</td></tr></table>
</li></ul>

 

위 내용에 

placeholder="상품명을 입력해 주세요"

이 부분을

1.상품명

2.가격

3.수량

 

이런식으로 표시 되게 가능 할까요?

 

이 질문에 댓글 쓰기 :

답변 3

다양한 방법이 있겠지만 아래의 코드도 한번 참고를 해보세요..

 

1.

 

<ul class="list-group mb-3">
    <li class="list-group-item">
        <table id="table10" style="width:100%;">
            <tr>
                <td>
                    <label class="col-md-10 col-form-label" for="wr_subject">1.상품내용<strong class="sr-only">필수</strong></label>
                    <textarea id="wr_subject" name="wr_subject" required class="form-control required" rows="10" 
                    placeholder="1.상품명
2.가격
3.수량"><?php echo $write['wr_subject'] ?></textarea>
                </td>
            </tr>
        </table>
    </li>
</ul>

 

<style>
    #wr_subject::placeholder {
        white-space: pre-line;
    }
</style>

 

 

 

 

2.

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>다중 라인 Placeholder</title>

<style>

/* 스타일링은 필요에 따라 조정 */

textarea {

width: 100%;

height: 150px;

padding: 10px;

font-size: 16px;

box-sizing: border-box;

}

</style>

</head>

<body>

<ul class="list-group mb-3">

<li class="list-group-item">

<table id="table10" style="width:100%;">

<tr>

<td>

<label class="col-md-10 col-form-label" for="wr_subject">1.상품내용<strong class="sr-only">필수</strong></label>

<textarea id="wr_subject" name="wr_subject" required class="form-control required" rows="10" placeholder="" onfocus="setPlaceholder(this)" onblur="clearPlaceholder(this)"><?php echo $write['wr_subject'] ?></textarea>

</td>

</tr>

</table>

</li>

</ul>

 

<script>

// Placeholder를 여러 줄로 설정

const placeholderText = "1.상품명\n2.가격\n3.수량";

 

function setPlaceholder(textarea) {

if (!textarea.value) {

textarea.placeholder = placeholderText;

}

}

 

function clearPlaceholder(textarea) {

if (!textarea.value) {

textarea.placeholder = "";

}

}

 

// 페이지 로드 시 placeholder 설정

document.addEventListener("DOMContentLoaded", function() {

const textarea = document.getElementById("wr_subject");

setPlaceholder(textarea);

});

</script>

</body>

</html>

 

 

 

아 그리고 혹시 해당 부분이 글을 쓸때는 없어지는데, 글쓰기 할때만
1.상품명
2.가격
3.수량
이렇게 나오게도 혹시나 가능 한 부분일까요? 지워지지 않게
 수정할때는 기존에 저장된것이 나오고
아주 간단한방법을 찾아 보다 그냥 텍스트아레아에 넣고 하니 수정할때 또 반복으로 나오더라구여~

혹시 원하시는게 이게 맞는지...

 

 

<ul class="list-group mb-3">
    <li class="list-group-item">
        <table id="table10" style="width:100%;">
            <tr>
                <td>
                    <label class="col-md-10 col-form-label" for="wr_subject">1.상품내용<strong class="sr-only">필수</strong></label>
                    <textarea id="wr_subject" name="wr_subject" required class="form-control required" rows="10"><?php echo $write['wr_subject'] ?></textarea>
                </td>
            </tr>
        </table>
    </li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var textarea = document.getElementById('wr_subject');
    var defaultPlaceholder = "1.상품명\n2.가격\n3.수량";

    // 페이지 로드 시 텍스트영역이 비어있으면 placeholder 설정
    if (textarea.value.trim() === '') {
        textarea.placeholder = defaultPlaceholder;
    }

    // 포커스를 얻었을 때 placeholder 제거
    textarea.addEventListener('focus', function() {
        if (this.placeholder === defaultPlaceholder) {
            this.placeholder = '';
        }
    });

    // 포커스를 잃었을 때, 내용이 비어있으면 placeholder 다시 설정
    textarea.addEventListener('blur', function() {
        if (this.value.trim() === '') {
            this.placeholder = defaultPlaceholder;
        }
    });
});
</script>

<style>
    #wr_subject::placeholder {
        white-space: pre-line;
    }
</style>

 

 

 

아 Placeholder 요 요소가 일반적으로 그냥 비춰주는거라서
실직적으로 해당 텍스트아레아에 마우스를 클릭하고 클씨를 쓰면, 해당 부분이 사라지게 되잖아요~
그래서 어떻게 고면, 글쓰기를 했을 때 해당 부분이 고정값으로 되어 있어서, 이어서 쓸수 있게 가능 할까해서요~
1.상품명
2.가격
3.수량
이렇게 되어 있으면 1,2,3은 사라지지 않고 뒤에 연결해서 쓸 수 있게 가능 한 부분인가해서요~~
1.상품명 : 빅토리아
이렇게 뒤에다 쓸 수 있게요~^^

이런걸 말씀하신거 같군요..

 

 


<ul class="list-group mb-3">
    <li class="list-group-item">
        <table id="table10" style="width:100%;">
            <tr>
                <td>
                    <label class="col-md-10 col-form-label" for="wr_subject">1.상품내용<strong class="sr-only">필수</strong></label>
                    <textarea id="wr_subject" name="wr_subject" required class="form-control required" rows="10"><?php 
                    if(empty(trim($write['wr_subject']))) {
                        echo "1.상품명 : \n2.가격 : \n3.수량 : ";
                    } else {
                        echo $write['wr_subject'];
                    }
                    ?></textarea>
                </td>
            </tr>
        </table>
    </li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var textarea = document.getElementById('wr_subject');
    var defaultContent = "1.상품명 : \n2.가격 : \n3.수량 : ";
    // 페이지 로드 시 텍스트영역이 비어있으면 기본 내용 설정
    if (textarea.value.trim() === '') {
        textarea.value = defaultContent;
    }
    // 커서를 항상 텍스트의 끝으로 이동
    textarea.setSelectionRange(textarea.value.length, textarea.value.length);
    // 포커스를 얻었을 때 커서를 맨 끝으로 이동
    textarea.addEventListener('focus', function() {
        this.setSelectionRange(this.value.length, this.value.length);
    });
});
</script>

 

 

 

제이앤님 혹시 한가지만 더 여쭤보도 될까요?
위 textarea를 wr_subject로 저장 되게 하는 것인데.
추가 삭제 버튼이 있어서. 똑같이 추가 되게 가능 할까요? textarea도 가능하지 해서요?
방법이 있을까요? 그리고 wr_subject도 explode 가 가능한가요?

답변을 작성하시기 전에 로그인 해주세요.
전체 1,284
QA 내용 검색

회원로그인

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