js聊天框_js eventsource聊天框-优快云博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,td,input,textarea,select,option{
				margin: 0;
				padding: 0;
			}
			html,body{
				height:100%;
			}
			body{
				font-family: "微软雅黑";
			}
			ul,ol,li{
				list-style:none;
			}
			a{
				text-decoration: none;
			}
			img{
				border: none;
			}
			.box{
				width:300px;
				height:400px;
				border:1px solid blue;
				margin:0 auto;
			}
			.inTer{
				width:280px;
				height:280px;
				border:1px dashed black;
				margin:0 auto;
				margin-top:10px;
				overflow-y:auto;
			}
			textarea{
				display:block;
				width: 276px;
				height:65px;
				margin:0 auto;
				margin-top:5px;
			}
			#btn{
				display:block;
				float:right;
				margin-right:10px;
				margin-top:5px;
			}
			p{
				display:inline-block;
				border-radius:5px;
				background-color:#dcdcdc;
				font-size:12px;
				padding:5px 5px;
				margin:5px 0;
				margin-left:5px;
				max-width:140px;
				word-wrap: break-word;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inTer" id="father">
					<p>hello?</p></br>
					<p>hello</p></br>
					<p>hehe</p></br>
					<p>hahahahahahahhahahahahahahahahahhahahahahahahahahahhahahahah</p></br>
			</div>
			<textarea style="resize: none;" id="txt">
			</textarea>
			<input type="button" name="" id="btn" value="发送" />
		</div>
	</body>
</html>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	var txt = document.getElementById("txt");
	var father = document.getElementById("father")
	var p = document.getElementsByTagName("p");
	btn.onclick=function(){
		if(txt.value==""){
			txt.placeholder="不能发送空的内容";
		}else{
			var son = document.createElement("p");
			son.style.backgroundColor="lawngreen";
			son.style.clear="both";
			son.style.float="right";
			son.style.marginRight="5px";
			son.innerText=txt.value;
			father.appendChild(son);
			txt.value="";
			son.scrollIntoView();
			txt.placeholder="";
		}
	}
	document.onkeydown=function(evt){
		var e = evt || event;
		e.keyCode=e.which=e.charCode;
		if(e.keyCode==13 || e.keyCode==10){
			if(txt.value==""){
				txt.placeholder="不能发送空的内容";
			}else{
				var son = document.createElement("p");
				son.style.backgroundColor="lawngreen";
				son.style.clear="both";
				son.style.float="right";
				son.style.marginRight="5px";
				son.innerText=txt.value;
				father.appendChild(son);
				txt.value="";
				son.scrollIntoView();
				txt.placeholder="";
			}
		}
	}
</script>
有点小bug