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 가 가능한가요?