<!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;
    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>

聊天对话框（ctrl+enter发送）的更多相关文章

  1. 按Ctrl+Enter发送的实现

    按Ctrl+Enter发送 1, 监听textarea的onkeydown事件 <textarea tabindex="1" class="ie6ta" ...

  2. 文本框获取光标位置 ---- ctrl+enter换行

    业务需求:按下enter键发送信息,按下ctrl+enter键换行 下面代码是网上找的资料 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  3. JS案例练习-手机微信聊天对话框

    先附图 CSS部分: <style> body{} *{;} li{list-style: none;} .container{ width:310px; height:600px; ma ...

  4. EXCEL excel中运用ctrl+D、ctrl+enter、ctrl+E批量填充数据

    在excel中,利用鼠标拖动可以快速向下或者向右填充序列或者复制单元格.但是利用快捷键也可以实现多种填充方式,本文就为大家介绍一些ctrl系列快捷键的填充,一起来看看吧. 封面tu 一,ctrl+D/ ...

  5. ctrl+enter提交留言

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  6. 屏蔽QQ聊天对话框中的广告

    原文地址: 怎么在QQ聊天对话框中屏蔽广告_百度经验 http://jingyan.baidu.com/article/48a42057ca12c1a924250402.html     QQ已经成为 ...

  7. MFC对话框屏蔽Enter和ESC键

    MFC对话框屏蔽Enter和ESC键参考:http://www.docin.com/p-122354833.html 方法一重载PreTranslateMessage函数 BOOL CXXDlg::P ...

  8. xls表格 ctrl+D 和ctrl+Enter区别 --快速填充相同数据，同时填充多个不同数据

    一.ctrl+Enter应用 如何快速实现下图两个图的填充值效果? ==>效果 1. 选择A列,或者所需要填充的范围 (下面利用 ctrl+G定位应用) 2.Ctrl+G 定位 选择 空值  在 ...

  9. js 组合键监听ctrl + enter

    $(window).keydown(function (event) { // 监听esc键退出全屏 if (event.keyCode == 27) { } // 监听 Ctrl + Enter 可 ...

随机推荐

  1. hbase java 基本例子

    一下代码实用  0.99.0 以后的版本. package hadoop; import java.io.IOException; import java.util.ArrayList; import ...

  2. Jenkins进阶-邮件通知(9)

    公司内部每天大概会发布N多版本,也不能派员工一直去盯着版本发布,所以希望发布完成后通知相关人员,Jenkins最早采用通知机制就是短信和邮件,由于短信成本很高,所以我们一般在发布结束后会采用邮件.现在 ...

  3. 同步中的四种锁synchronized、ReentrantLock、ReentrantReadWriteLock、StampedLock

    为了更好的支持并发程序,JDK内部提供了多种锁.本文总结4种锁. 1.synchronized同步锁 使用: synchronized本质上就2种锁: 1.锁同步代码块 2.锁方法 可用object. ...

  4. ESP8266 ESP-01调试方法

    1. 用AMS1117搭建一个3.3V输出的电路 2. ESP8266 ESP-01接线 只要连接UTXD.GND.CH_PD.VCC.URXD这五个管脚就可以直接使用了. 注意的是CH_PD要接高电 ...

  5. html-display标签

    标签可以分为行内标签和行间块级标签, 块级标签:占一行,如果父标签没有限高度,子标签会自动扩展父标签的高度,行内标签不能, 可以设置宽度 高度 padding margin 行内标签:    不能设置 ...

  6. 通过Word 2016 发布的内容

    从Word 2007 开始就支持的功能的,第一次使用. 在cnBlogs.com的个人设置中允许使用客户端发布:https://i.cnblogs.com/Configure.aspx Word中配置 ...

  7. vue element-ui 用checkebox 来模拟选值 1/0

    https://jsfiddle.net/57dz2m3s/12/ 复制 粘贴 打开url就可以看到效果

  8. a标签中可以加button,但是不提倡；button中不能加a标签，否则不能跳转

    a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转

  9. Zabbix 创建监控项目

    #1 #2 [root@nod01 zabbix_agentd.d]# pwd/etc/zabbix/zabbix_agentd.d 新建文件nod.conf [root@nod01 zabbix_a ...

  10. php给app写接口进行接口的加密

    <?php/**inc解析接口客户端接口传输规则:1.用cmd参数(base64)来动态调用不同的接口,接口地址统一为 http://a.lovexpp.com2.将要传过来的参数组成一个数组, ...