JavaScript聊天输入框消息发送页面(ES6+普通写法)

ggbba@

于 2023-03-22 12:14:44 发布

阅读量596

点赞数 1

分类专栏： JavaScript HTML 文章标签： javascript css html 前端 es6

本文链接：https://blog.csdn.net/OYBY123/article/details/129706992

版权

JavaScript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

JavaScript聊天输入框消息ES6

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聊天对话框</title>
  <!-- css -->
  <style type="text/css">
    * {
      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;
    }

    .content .right {
      float: right;
      text-align: right;
      background-color: yellowgreen;
    }
  </style>
</head>
<!-- HTML -->
<body>
  <div id="main" class="main">
    <ul id="content" class="content">
      <li class="msgContent left">hello?</li>
      <div style="clear: both"></div>
      <li class="msgContent left">hello</li>
      <div style="clear: both"></div>
      <li class="msgContent right">hi</li>
      <div style="clear: both"></div>
      <li class="msgContent left">hehe</li>
      <div style="clear: both"></div>
      <li class="msgContent left">goodbye</li>
      <div style="clear: both"></div>
      <li class="msgContent right">。。。。</li>
      <div style="clear: both"></div>
      <li class="msgContent right">
        你好scdn
      </li>
      <div style="clear: both"></div>

      <li class="msgContent right">在吗?
      </li>
      <div style="clear: both"></div>
    </ul>
    <textarea id="msg_input" class="msgInput"></textarea>
    <button id="sendbtn" class="sendbtn">发送</button>
  </div>

  <!-- JavaScript -->
  <script>
    //取textarea,button,ul元素
    let textarea = document.querySelector("#msg_input");
    let button = document.querySelector("#sendbtn");
    let oUl = document.querySelector('.content')
    //声明函数(封装)
    function message() {
      //获取并显示输入的值
      let msg = textarea.value;
      //console.log(msg);

      //创建元素节点createElement
      let lis = document.createElement("li");
      //console.log(lis);
      lis.className = "msgContent right";
      lis.innerHTML = msg;
      let oDiv = document.createElement("div");
      //清除左右浮动
      oDiv.style.clear = "both";
      //插入li消息,oDive浮动节点到UL中
      oUl.appendChild(lis);
      oUl.appendChild(oDiv);
      textarea.value = "";
      //始终显示滚动到最新消息
      lis.scrollIntoView();
    }
    //发送button加点击事件,调用封装函数message()
    button.onclick = () => {
      message();
    }
    //添加键盘事件,按Enter建发送消息,调用封装函数message()
    textarea.onkeydown = event => {
      if (event.keyCode === 13) {
        message();
      }
    }
  </script>
</body>

</html>

JavaScript聊天输入框消息普通写法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>聊天对话框</title>
    <style type="text/css">
        * {
            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;
        }

        .content .right {
            float: right;
            text-align: right;
            background-color: yellowgreen;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //		li.scrollIntoView();//将元素滚动到可见位置
        };
    </script>
</head>

<body>
    <div id="main" class="main">
        <ul id="content" class="content">
            <li class="msgContent left">hello?</li>
            <div style="clear: both"></div>
            <li class="msgContent left">hello</li>
            <div style="clear: both"></div>
            <li class="msgContent right">hi</li>
            <div style="clear: both"></div>
            <li class="msgContent left">hehe</li>
            <div style="clear: both"></div>
            <li class="msgContent left">goodbye</li>
            <div style="clear: both"></div>
            <li class="msgContent right">。。。。</li>
            <div style="clear: both"></div>
            <li class="msgContent right">
                sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd
                fasdfasdfasdf
            </li>
            <div style="clear: both"></div>

            <li class="msgContent right">aaa</li>
            <div style="clear: both"></div>
        </ul>
        <textarea id="msg_input" class="msgInput"></textarea>
        <button id="sendbtn" class="sendbtn">发送</button>
    </div>

    <script>
        /* 
              1- 找到元素
              2- 给btn添加点击事件，
              3- 点击的时候获取输入框的值，
              根据值创建 li和div 添加到ul里面
           */

        var msg_input = document.querySelector("#msg_input");
        var sendbtn = document.querySelector("#sendbtn");
        var content = document.querySelector("#content");
        function sendmsg() {
            var msg = msg_input.value;
            var newli = document.createElement("li");
            newli.innerHTML = msg;
            newli.className = "msgContent right";
            var oDiv = document.createElement("div");
            oDiv.style.clear = "both";
            // console.log(newli);
            content.appendChild(newli);
            content.appendChild(oDiv);

            newli.scrollIntoView();// 滚动到可视区
            msg_input.value = "";

        }
        sendbtn.onclick = function () {
            sendmsg()
        }
        msg_input.onkeydown = function (e) {
            if (e.keyCode == 13) {
                sendmsg();
            }
        }

    </script>
</body>

</html>

呈现结果: