textarea 내용을 초기화 하는 법
textarea의 내용을 초기화 상태가 되고 "메시지를 입력하세요"와 같은 힌트 글이 희미하게 보이도록 하는 방법에 대한 것이다.
<html>
... 중략 ...
<body>
<form action="push_noti.php" method="post">
<textarea id="mTxtArea" onclick=this.value='';" name="message" rows="4" cols="50" placeholder="메시지를 입력하세요" required>
</textarea><br/>
<input type="submit" name="submit" value="Send" id="submitButton">
</form>
<script type="text/javascript">
document.getElementById("mTxtArea").value='';
</script>
</body>
</html>
여기서 구현한 방법은 textarea에 id 값을 지정해서 JavaScript에서 이 id 값을 이용해서 textarea의 내용을 초기화 했다는 것이다.
JavaScript에서 textarea을 초기화한 핵심 코드는 아래 코드이다.
document.getElementById("mTxtArea").value='';
그리고 textarea를 클릭했을 때 onclick 이벤트를 활용해서 역시 내용을 초기화 하기도 했다.
placeholder="메시지를 입력하세요"는 textarea에 아무런 값도 없을 때 힌트 메시지를 보이게 하는 기능이다.
'HTML' 카테고리의 다른 글
| dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기 (0) | 2020.10.29 |
|---|---|
| HTML의 col 태그에 대해서 (0) | 2018.08.31 |
| 크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기) (0) | 2018.08.22 |
| HTML 링크를 새 창에서 열기 (0) | 2015.10.26 |
| HTML의 th와 td의 개념 (0) | 2015.10.13 |