<style>
.area{
width: 300px;
height: 100px;
border: 1px solid black;
}
/* 카카오톡 채팅 만들기 */
#chatting-bg{
width: 360px;
height: 400px;
border: 1px solid black;
background-color: rgb(178, 199, 217);
overflow: auto;
}
/* 채팅 내용 */
#chatting-bg > p > span{
background-color: rgb(254, 234, 51);
padding: 5px;
border-radius: 5px;
}
/* 채팅 출력 라인 */
#chatting-bg > p{
margin: 20px 10px;
text-align: right;
}
</style>
.
.
.
<h3>카카오톡 채팅 화면 만들기</h3>
<div id="chatting-bg">
<p> <span> 추가 입력</span></p>
<p> <span> 입력되는 채팅 출력</span></p>
<p> <span> 입력되는 채팅 출력</span></p>
</div>
<!-- onkeydown : 키가 눌러졌을 때 -->
<!-- onkeypress : 키가 눌려지고 있을 때 -->
<!-- 쭉 누르고 있을 경우 무분별한 함수 호출이 발생 -->
<!-- onkeyup : 키가 올라올 때 -->
<input type="text" id="chatting-input" size="50" onkeyup="inputEnter(event)">
<button onclick="readValue()">입력</button>
// 카카오톡 채팅 만들기
function readValue(){
// 채팅 입력에 사용되는 요소 모두 얻어오기
const bg = document.getElementById("chatting-bg");
const input = document.querySelector("#chatting-input");
// input에 입력된 값이 있을 경우
if(input.value.trim().length > 0){
// 문자열.trim() : 문자열 양 끝에 공백을 모두 제거
// ex) " k h ".trim() -> "k h"
// input에 입력된 값을 얻어와 bg에 추가(누적)
bg.innerHTML += "<p> <span>" + input.value + "</span></p>";
// 요소.scrollTop : 요소 내부 현재 스크롤 위치 반환
// 요소.scrollTop = 위치 : 스크롤을 특정 위치 이동
// 요소.scrollHeight : 스크롤 전체 높이
// bg의 스크롤을 제일 밑으로 내리기
bg.scrollTop = bg.scrollHeight;
}
// input에 작성된 값 변경하기
input.value = ""; // 빈 문자열 == value 지우기
// input에 초점 맞추기 -> focus()
input.focus();
}
// input 태그 키가 눌러졌을 때 엔터인 경우를 검사하는 함수
function inputEnter(event){
// console.log(event.key); // 현재 눌러진 키를 반환
if(event.key == "Enter"){ // 눌러진 key가 Enter인 경우
readValue(); // 함수 호출
}
}
-> 엔터를 누를 때마다 채팅이 입력되는 모습을 볼 수 있다!