<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天对话框 - 回车键发送信息</title>
<style>
#box{
300px;
height: 500px;
border:solid 1px black;
}
#box .cont{
height: 379px;
overflow:auto;
padding: 10px;
}
#box .cont::-webkit-scrollbar{
display: none;
}
.cont p{
max- 250px;
word-wrap: break-word;
border-radius: 10px ;
padding: 5px;
margin: 5px;
clear: both;
}
.cont p:nth-child(2n){
background: rgb(80, 211, 80);
float: left;
}
.cont p:nth-child(2n-1){
background: red;
float: right;
}
#box form{
border-top: 1px solid black;
height: 100px;
display: flex;
}
form *{
margin: 0;
padding: 0;
border: none;
background-color: none;
height: 100px;
outline: none;
}
#txt{
220px;
padding: 10px;
height: 80px;
}
#btn{
60px;
border-left: 1px solid black;
}
</style>
</head>
<body>
<div id="box">
<div class="cont">
<p>在吗</p>
<p>你好</p>
<p>在吗</p>
<p>你好</p>
</div>
<form>
<textarea id="txt" cols="35" rows="3" ></textarea>
<input type="button" id="btn" value="发送">
</form>
</div>
</body>
<script>
var otxt = document.getElementById("txt")
var obtn = document.getElementById("btn")
var ocont = document.querySelector(".cont")
btn.onclick=function(){
fn()
}
otxt.onkeydown = function(eve){
var e = eve || window.event;
if(e.keyCode==13){
fn()
}
}
function fn(){
var p = document.createElement("p");
p.innerHTML = otxt.value;
ocont.appendChild(p);
// p.style.float="right";
// p.className="#box .cont p"
otxt.value = "";
ocont.scrollTop=ocont.scrollHeight
}
</script>
</html>