디지털 컨버전스/Java Script
[JQuery] 채팅 박스 - 이모티콘 박스 추가
gimyeondong
2020. 4. 20. 17:50
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
</head>
<style>
*{box-sizing: border-box;}
div{
position: absolute;
border: 1px solid black;
}
.wrapper{
width: 300px;
height: 300px;
margin: auto;
position: absolute;
}
input{
height: 100%;
}
#topbox{
width:100%;
height:80%;
overflow-y:auto;
word-wrap: break-word;
word-break: break-all;
}
#box{
width: 100%;
}
#bottombox{
bottom: 0px;
height: 20%;
width: 100%;
}
#bottombox input{
width: 100%;
}
#inputbox{
height: 100%;
width: 80%;
}
#btnbox{
height: 100%;
width: 20%;
right: 0px;
}
#econbox{
width: 300px;
height: 300px;
background-color: rgba(0,0,0,0.5);
position: absolute;
z-index: 5;
}
#econclose{
height: 25px;
width: 25px;
position: absolute;
left: 270px;
background-color: gray;
border: 0px;
}
#econbox img{
width: 55px;
height: 55px;
float: left;
}
</style>
<script>
function updateScroll(){
var element = document.getElementById("topbox");
element.scrollTop=element.scrollHeight;
}
$(function(){
$("#econbox").hide();
$("#econ").on("click",function(){
$("#econbox").slideDown();
})
$("#econclose").on("click",function(){
$("#econbox").slideUp();
})
$("#input").on("keyup",function(e){
if(e.keyCode == 13){
var msg = $("#input").val();
var tr = $("<tr></tr");
tr.append("<td>"+msg);
$("#box").append(tr);
$("#input").val("");
updateScroll();
}
})
})
</script>
<body>
<div class="wrapper">
<div id=topbox>
<table id="box"></table>
</div>
<div id="bottombox">
<div id=inputbox> <input type="text" id="input"></div>
<div id=btnbox> <input type="button" value="econ" id="econ"></div>
</div>
<div id="econbox">
<input type="button" value="X" id="econclose">
<img src="314e41127aeee.gif">
<img src="314e950217025.gif">
<img src="314f978340e64.gif">
<img src="314fb68c6e7bc.gif">
<img src="314fe74835002%20(1).gif">
<img src="314ff32aa4609.gif">
<img src="3151637b2d785.gif">
<img src="31516dd6c9ec7.gif">
<img src="3151896138026.gif">
<img src="315229bd15814.gif">
</div>
</div>
</body>
</html>문제점
1. input type=text 에는 이미지 넣을 수 없음
2. 이미지 소스(html태그)를 넣으면 빈칸으로 출력, 스크립트 코드를 넣으면 그대로 동작 (보안상 취약점)
contenteditable
textare나 input type=text가 아닌 div 사용
contenteditable="true" 속성 사용
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
</head>
<style>
*{box-sizing: border-box;}
div{
position: absolute;
border: 1px solid black;
}
.wrapper{
width: 300px;
height: 300px;
margin: auto;
position: absolute;
}
input{
height: 100%;
}
#topbox{
width:100%;
height:80%;
overflow-y:auto;
word-wrap: break-word;
word-break: break-all;
}
#box{
width: 100%;
}
#bottombox{
bottom: 0px;
height: 20%;
width: 100%;
}
#bottombox input{
width: 100%;
}
#inputbox{
height: 100%;
width: 80%;
}
#btnbox{
height: 100%;
width: 20%;
right: 0px;
}
#econbox{
width: 300px;
height: 240px;
background-color: rgba(0,0,0,0.5);
position: absolute;
z-index: 5;
}
#econclose{
height: 25px;
width: 25px;
position: absolute;
left: 270px;
background-color: gray;
border: 0px;
}
#econbox img{
width: 55px;
height: 55px;
float: left;
}
</style>
<script>
function updateScroll(){
var element = document.getElementById("topbox");
element.scrollTop=element.scrollHeight;
}
$(function(){
$("#econbox").hide();
$("#econ").on("click",function(){
$("#econbox").slideDown();
})
$("#econclose").on("click",function(){
$("#econbox").slideUp();
})
$("#inputbox").on("keyup",function(e){
if(e.keyCode == 13){
var msg = $("#inputbox").html();
var tr = $("<tr></tr");
tr.append("<td>"+msg);
$("#box").append(tr);
$("#inputbox").html("");
updateScroll();
}
})
})
</script>
<body>
<div class="wrapper">
<div id=topbox>
<table id="box"></table>
</div>
<div id="bottombox">
<div id="inputbox" contenteditable="true"></div>
<div id=btnbox> <input type="button" value="econ" id="econ"></div>
</div>
<div id="econbox">
<input type="button" value="X" id="econclose">
<img src="314e41127aeee.gif">
<img src="314e950217025.gif">
<img src="314f978340e64.gif">
<img src="314fb68c6e7bc.gif">
<img src="314fe74835002%20(1).gif">
<img src="314ff32aa4609.gif">
<img src="3151637b2d785.gif">
<img src="31516dd6c9ec7.gif">
<img src="3151896138026.gif">
<img src="315229bd15814.gif">
</div>
</div>
</body>
</html>
출력시 2줄이 입력되는 현상
contenteditable의 엔터 기능은 원래 존재 (엔터가 눌리는 시점keydown에 줄바꿈)
+우리가 추가한 기능 (눌렀다 올라오는 시점keyup 에 입력)
$("#inputbox").on("keyup",function(e){
if(e.keyCode == 13){
e.preventDefault();
// var msg = $("#inputbox").html();
// var tr = $("<tr></tr");
// tr.append("<td>"+msg);
// $("#box").append(tr);
// $("#inputbox").html("");
updateScroll();
}
})e.preventDefault(); 기본 동작을 방지해라
keydown : 키를 누르는 시점에 동작
$("#inputbox").on("keydown",function(e){
if(e.keyCode == 13){
e.preventDefault();
var msg = $("#inputbox").html();
var tr = $("<tr></tr");
tr.append("<td>"+msg);
$("#box").append(tr);
$("#inputbox").html("");
updateScroll();
}
})
타이핑을 통해 입력되는 스크립트와 html태그 기능하지 않음
제작자가 프로그램적으로 넣는 이미지는 허용
궁극적으로는 보안성을 높이기 위해서는 서버측에서 검토해야함
클라이언트 측에서 보안은 div contenteditable 정도로
방어체계 : Injection Vector(악성코드를 끼워넣을 공간) 제거
이미지 넣기
$("#econbox>img").on("click",function(){
$("#inputbox").append($(this).clone());
$("#econbox").slideUp();
}) #inputbox img, #box img{
width: 50px;
height: 50px;
}이모티콘 박스의 이미지를 클릭할시 자신을 채팅창(inputbox)에 넣기
그냥 this만 사용할 경우 이모티콘이 1회용이 되므로
$(this).clone() 로 복제하여 보내기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
</head>
<style>
*{box-sizing: border-box;}
div{
position: absolute;
border: 1px solid black;
}
.wrapper{
width: 300px;
height: 300px;
margin: auto;
}
input{
height: 100%;
}
#topbox{
width:100%;
height:80%;
overflow-y:auto;
word-wrap: break-word;
word-break: break-all;
}
#box{
width: 100%;
}
#bottombox{
bottom: 0px;
height: 20%;
width: 100%;
}
#bottombox input{
width: 100%;
}
#inputbox{
height: 100%;
width: 80%;
overflow-y: auto;
}
#btnbox{
height: 100%;
width: 20%;
right: 0px;
}
#econbox{
width: 300px;
height: 240px;
background-color: rgba(0,0,0,0.5);
z-index: 5;
}
#econclose{
height: 25px;
width: 25px;
position: absolute;
left: 270px;
background-color: gray;
border: 0px;
}
#econbox img{
width: 55px;
height: 55px;
float: left;
}
#inputbox img, #box img{
width: 50px;
height: 50px;
}
</style>
<script>
function updateScroll(){
var element = document.getElementById("topbox");
element.scrollTop=element.scrollHeight;
}
$(function(){
$("#econbox>img").on("click",function(){
$("#inputbox").append($(this).clone());
$("#econbox").slideUp();
})
$("#econbox").hide();
$("#econ").on("click",function(){
$("#econbox").slideDown();
})
$("#econclose").on("click",function(){
$("#econbox").slideUp();
})
$("#inputbox").on("keydown",function(e){
if(e.keyCode == 13){
e.preventDefault();
var msg = $("#inputbox").html();
var tr = $("<tr></tr");
tr.append("<td>"+msg);
$("#box").append(tr);
$("#inputbox").html("");
updateScroll();
}
})
})
</script>
<body>
<div class="wrapper">
<div id=topbox>
<table id="box"></table>
</div>
<div id="bottombox">
<div id="inputbox" contenteditable="true"></div>
<div id=btnbox> <input type="button" value="econ" id="econ"></div>
</div>
<div id="econbox">
<input type="button" value="X" id="econclose">
<img src="314e41127aeee.gif">
<img src="314e950217025.gif">
<img src="314f978340e64.gif">
<img src="314fb68c6e7bc.gif">
<img src="314fe74835002%20(1).gif">
<img src="314ff32aa4609.gif">
<img src="3151637b2d785.gif">
<img src="31516dd6c9ec7.gif">
<img src="3151896138026.gif">
<img src="315229bd15814.gif">
</div>
</div>
</body>
</html>