聊天对话框（ctrl+enter发送）

<!DOCTYPE html>

<html>

<head>

<title>聊天对话框</title>

*{font-size: 14px; padding:0; margin:0;}

.main{

position: relative;

margin: 20px auto;

border: 1px solid steelblue;

width: 430px;

height: 400px;

}

.msgInput{

display: block;

width: 406px;

height: 60px;

margin: 10px auto;

}

.sendbtn{

position: absolute;

width: 100px;

height: 29px;

bottom: 5px;

right: 10px;

}

.content{

list-style: none;

width: 410px;

height: 280px;

margin: 5px auto;

border: 1px dotted #D1D3D6;

overflow-y: scroll;

}

.msgContent{

width:auto;

max-width: 250px;

height: auto;

word-break: break-all;

margin: 5px;

padding: 3px;

border-radius: 5px;

}

.content .left{

float: left;

text-align: left;

background-color: lightgrey;

clear: both;

}

.content .right{

float: right;

text-align: right;

background-color: yellowgreen;

clear: both;

}

</style>

</head>

<body>

<li class="msgContent left">hello?</li>

<li class="msgContent left">hello</li>

<li class="msgContent left">goodbye</li>

<li class="msgContent right">sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd fasdfasdfasdf</li>

</ul>

</div>

</body>

</html>

发送时，动态创建li 并设置li的样式msgContent right

document.onkeyup = function(e){

var e = e || event;

if( e.keyCode == 13 && e.ctrlKey ){

var oli = document.createElement("li");

oli.innerHTML = $id("msg_input").value;

$id("content").appendChild( oli );

oli.className = "msgContent right";

$id("msg_input").value = "";

oli.scrollIntoView();

}

</script>

巴特西

聊天对话框（ctrl+enter发送）

最新文章

热门文章