zoukankan      html  css  js  c++  java
  • 聊天对话框(ctrl+enter发送)

    <!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;
         430px;
        height: 400px;
    }
    .msgInput{
        display: block;
         406px;
        height: 60px;
        margin: 10px auto;
        
    }
    .sendbtn{
        position: absolute;
         100px;
        height: 29px;
        bottom: 5px;
        right: 10px;
    }
    .content{
        list-style: none;
         410px;
        height: 280px;
        margin: 5px auto;
        border: 1px dotted #D1D3D6;
        overflow-y: scroll;
    }
    .msgContent{
        auto;
        max- 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>
        <div id="main" class="main">
            <ul id="content" class="content">
                <li class="msgContent left">hello?</li>
                <li class="msgContent left">hello</li>
                <li class="msgContent right">hi</li>
                <li class="msgContent left">hehe</li>
                <li class="msgContent left">goodbye</li>
                <li class="msgContent right">。。。。</li>
                <li class="msgContent right">sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd fasdfasdfasdf</li>
            </ul>
            <textarea id="msg_input" class="msgInput"></textarea>
            <button id="sendbtn" class="sendbtn">发送</button>
        </div>
    </body>
    </html>
    <script src="../../public.js"></script>
    <script>
        /*
         发送时,动态创建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>
  • 相关阅读:
    30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)(转载)
    JavaScript事件流原理解析
    Java中this和super的用法和区别
    Java多态面试题案例几解题思路
    Java多态的向上转型和向下转型
    Java方法的重载和重写
    Java冒泡具体的原理,以及下标的变化
    Java中的冒泡排序和选择排序
    使用Java实现对一个数组的增删改查以及初始化
    Java中构造函数传参数在基本数据类型和引用类型之间的区别
  • 原文地址:https://www.cnblogs.com/tis100204/p/10319252.html
Copyright © 2011-2022 走看看