<!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. 通过script src引入ElementUI时，使用语句：window.ELEMENT.MessageBox.alert(xxx) 调用弹出框

    通过script src引入ElementUI时,使用语句:window.ELEMENT.MessageBox.alert(xxx) 调用弹出框.

  2. Java模板引擎之Freemarker

    Freemarker定义: 一款模板引擎 Freemarker是一个web图层组件不是web框架,解析服务端数据到页面 小例子: <#list 集合 as item> list标签对集合进 ...

  3. ML: 降维算法-LLE

    局部线性嵌入 (Locally linear embedding)是一种非线性降维算法,它能够使降维后的数据较好地保持原有 流形结构 .LLE可以说是流形学习方法最经典的工作之一.很多后续的流形学习. ...

  4. 关于mybatis map foreach遍历

    map 数据如下 Map<String,List<Long>>. 测试代码如下: public void getByMap(){ Map<String,List<L ...

  5. [蓝桥杯]ALGO-95.算法训练_2的次幂表示

    题目描述: 问题描述 任何一个正整数都可以用2进制表示,例如:137的2进制表示为10001001. 将这种2进制表示写成2的次幂的和的形式,令次幂高的排在前面,可得到如下表达式:=^+^+^ 现在约 ...

  6. Boost--lexical_cast 一个方便安全高效的string转换库

    #include "boost\lexical_cast.hpp" #include <vector> #include <iostream> #inclu ...

  7. 【Maven】从Maven中导出项目依赖的Jar包

    从SVN上下载源代码 svn export https://10.200.1.201/xxxx/PLATFORM code/ --force --username xxx --password xxx ...

  8. 知识点-jar包

    JAR文件的全称是Java Archive File,意思就是Java档案文件.通常JAR文件是一种压缩文件,与常见的ZIP压缩文件兼容,同城也被称为JAR包.JAR文件与zip文件的去区别就是在JA ...

  9. BIO & NIO & NIO常见框架

    BIO & NIO BIO - Blocking IO - 同步式阻塞式IO --- UDP/TCP NIO - New  IO - 同步式非阻塞式IO AIO  - Asynchronous ...

  10. [转][C#]枚举的遍历Enum

    // 加载所有颜色 //foreach (Color item in Enum.GetValues(typeof(Color))) foreach (var item in typeof(Color) ...