반응형
출처: https://nine01223.tistory.com/253 [스프링연구소(spring-lab)]
Textarea 내용 추가 시 아래로 자동 스크롤
정리. 수알치 오상문
채팅방에서 textarea를 이용할 때 내용이 하단에 추가되어도 스크롤바가 아래로 내려가지 않아서 직접 스크롤바를 하단으로 내려야 추가 메시지를 볼 수 있습니다. 텍스트영역에 값을 추가할 때 아래 자바스크립가 동작하도록 하면 스크롤바가 자동으로 내려갑니다.
document.getElementById("chat-textarea").scrollTop = document.getElementById("chat-textarea").scrollHeight;
참조한 내용에서는 IE에서만 동작한다고 하는데 제가 테스트할 때는 크롬에서도 동작했습니다.
아래는 실제 적용한 소스 코드 예입니다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<title>대화방</title>
</head>
<body>
<div style="margin:1rem;"></div>
대화 내용
<textarea id="chat-log" cols="40" rows="20" readonly
style="margin:0.2rem 0 1rem 0; border:solid 1px black;"></textarea><br/>
메시지 입력
<input id="chat-message-input" type="text" size="38"
style="margin:0.2rem 0 0.5rem 0; height:2rem; border:solid 1px black;"/> <br/>
<input id="chat-message-submit" class="btn btn-primary btn-sm" type="button"
style="width:80px;" value="보내기"/>
<input id="username" type="hidden" value="{{user.username}}"/>
<script>
var roomName = {{ room_name_json }};
var chatSocket = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/' + roomName + '/');
chatSocket.onmessage = function(e) {
var data = JSON.parse(e.data);
var message = data['message'];
document.querySelector('#chat-log').value += (message + '\n');
// 아래로 자동 스크롤
document.getElementById("chat-log").scrollTop = document.getElementById("chat-log").scrollHeight;
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
document.querySelector('#chat-message-submit').click();
}
};
document.querySelector('#chat-message-submit').onclick = function(e) {
var username = document.querySelector('#username').value;
var messageInputDom = document.querySelector('#chat-message-input');
var message = "[" + username + "] " + messageInputDom.value;
chatSocket.send(JSON.stringify({
'message': message
}));
messageInputDom.value = '';
// 아래로 자동 스크롤
document.getElementById("chat-log").scrollTop = document.getElementById("chat-log").scrollHeight;
};
</script>
</body>
</html>
<이상>
반응형
'JavaScript, jQuery' 카테고리의 다른 글
| 자바스크립트 기초 강좌 : 100분 완성 (0) | 2022.05.14 |
|---|---|
| Input text 한/영, 숫자 입력 제한, 길이 제한 자바스크립트 (0) | 2021.11.15 |
| 자바스크립트 프로처럼 쓰는 팁 (0) | 2021.08.25 |
| 자바스크립트 기초, 엘리님 동영상 강의 (프론트엔드 개발자 입문)(JavaScript ES5+) (0) | 2021.08.23 |
| 자바스크립트 배우기 전 볼 영상 | 자바스크립트 역사, 현재, 미래 (JavaScript,ECMAScript,JQuery,Babel,Node.js) (0) | 2021.08.23 |