js简易聊天框- 鼠标和回车键发送消息

最新推荐文章于 2023-11-16 20:41:59 发布

Cupid510

最新推荐文章于 2023-11-16 20:41:59 发布

阅读量1.1k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/weixin_44283432/article/details/108091761

版权

javaScript 专栏收录该内容

235 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聊天对话框 - 回车键发送信息</title>
    <style>

        #box{
            width: 300px;
            height: 500px;
            border:solid 1px black;
            }
        #box .cont{
            height: 379px;
            overflow:auto;
            padding: 10px;
            } 
        #box .cont::-webkit-scrollbar{
				display: none;
        }
        .cont p{
            max-width: 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{
            width: 220px;
            padding: 10px;
            height: 80px;
        }
       #btn{
           width: 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>

Cupid510

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js简易聊天框- 鼠标和回车键发送消息

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>聊天对话框 - 回车键发送信息</title> <style> #box{ width: 300px; ...
复制链接

扫一扫