本文实例为大家分享了js实现聊天对话框的具体代码，供大家参考，具体内容如下

.box{

width:300px;

height:400px;

border:1px solid blue;

margin:0 auto;

}

.inTer{

width:280px;

height:280px;

border:1px solid deeppink;

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:#dcdcdc;

font-size:12px;

padding:5px 5px;

margin:5px 0;

margin-left:5px;

max-width:140px;

word-wrap: break-word;

}

var btn = document.getElementById("btn");

var txt = document.getElementById("txt");

var father = document.getElementById("father")

var p = document.getElementsByTagName("p");

btn.οnclick=function(){

if(txt.value==""){

alert("请勿发送空内容");

}

else{

var son = document.createElement("p");

son.style.backgroundColor="yellowgreen";

son.style.clear="both";

son.style.float="right";

son.style.marginRight="5px";

son.innerText=txt.value;

father.appendChild(son);

txt.value="";

son.scrollIntoView();

}

}

document.οnkeydοwn=function(evt){

var e = evt || event;

e.keyCode=e.which=e.charCode;

if(e.keyCode==13 || e.keyCode==10){

if(txt.value==""){

alert("请勿发送空内容");

}

else{

var son = document.createElement("p");

son.style.backgroundColor="yellowgreen";

son.style.clear="both";

son.style.float="right";

son.style.marginRight="5px";

son.innerText=txt.value;

father.appendChild(son);

txt.value="";

son.scrollIntoView();

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。