<!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. MySQL 建表语句 create table 中的列定义

    MySQL 建表语句 create table 中的列定义: column_definition: data_type [NOT NULL | NULL] [DEFAULT default_value ...

  2. 不同路径 II

    一个机器人位于一个 m x n 网格的左上角 (起始点标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角. 现在考虑网格中有障碍物.那么从左上角到右下角将会有多 ...

  3. 认识数据-数据的计量尺度（Levels of Measurement）

    一. 数据的计量尺度(Levels of Measurement) 一般认为,数据是对客观现象计量的结果.按照对事物计量的精确程度,可将所采用的计量尺度由低级到高级分为四个层次: 1.定类尺度(Nom ...

  4. matchmove流程中修改Maya相机数据的脚本

    matchmove组的流程涉及到syntheyes与maya,nuke交接的问题.syntheyes会生成包含去畸变节点的nuke工程 和带跟踪信息的maya工程.在nuke工程上渲染得到去畸变的序列 ...

  5. 《JavaScript设计模式与开发》笔记 6.高阶函数

    1.函数作为参数传递 1.回调函数 2.Array.prototype.sort 2.函数作为返回值输出 1.判断数据的类型 3.高级函数的实现AOP 4.高阶函数的其他应用 1.currying 函 ...

  6. MQTT 3.1.1，值得升级的6个新特性

    前言 以前看英文文章或资料,看完之后,摘要或者忘记.这一次选择感兴趣的MQTT 3.1.1介绍文章资料,引文见文末,作为练手:非完全翻译,去除掉一些广告性描述,若侵权,请告知. 在沉寂了四年之后,QT ...

  7. Java第11次实验(数据库)

    参考资料 数据结构实验参考文件 数据库初始化文件 MySQL操作视频 数据库相关jar文件请参考QQ群文件. 第1次实验 1. MySQL数据库基本操作 完整演示一遍登录.打开数据库.建表.插入 常见 ...

  8. 64位系统VBS调用32位COM组件

    64位系统VBS调用32位COM组件 标签: 32位, 64位, COM, COM组件, VB, VBS, VBScript 标题: 64位系统VBS调用32位COM组件作者: Demon链接: ht ...

  9. Spark 在Hadoop HA下配置HistoryServer问题

    我的Spark机群是部署在Yarn上的,因为之前Yarn的部署只是简单的完全分布式,但是后来升级到HA模式,一个主NN,一个备NN,那么Spark HistoryServer的配置也需要相应的做修改, ...

  10. Javascript中的原型、原型链（十）

    一.原型 每当创建一个函数时,函数就会包含一个prototype属性,这个属性其实相当于一个指针,指向调用该构造函数创建的对象原型. 这个对象原型里面有一个constructor属性,这个属性又指向构 ...