<!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 学习资料

    MySQL 学习资料: MySQL 学习资料 网址 MySQL 教程(菜鸟教程) http://www.runoob.com/mysql/mysql-tutorial.html MySQL 教程(极客 ...

  2. git add -A /git add -u/git add .的用法

    git的指令详解 在git中有好多的指令,但是今天这几个指令就很容易忘记而且还容易混淆 git add -u <==> git add –update 提交所有被删除和修改的文件到数据暂存 ...

  3. ELK入门以及常见指令

    ES的资源: https://www.elastic.co/guide/en/elasticsearch/reference/current/getting-started.htmlhttps://w ...

  4. Linux之用户组、文件权限详解

    用户和用户组 文件所有者(u) 一般为文件的创建者,谁创建了该文件,就天然的成为该文件的所有者 用ls ‐ahl命令可以看到文件的所有者 也可以使用chown 用户名 文件名来修改文件的所有者 用户组 ...

  5. GetClass与RegisterClass的应用一例

    利用GetClass与RegisterClass可以实现根据字符串来实例化具体的子类,这对于某些需要动态配置程序的场合是很有用的.其他的应用如子窗体切换,算法替换等都能得到应用. unit Examp ...

  6. xe5 android 手机上使用sqlite [转]

    在android手机上怎样使用sqlite数据库,这里用Navigator实现 增删改查. 1.新建firemonkey mobile application 2.选择blank applicatio ...

  7. Windows Server 2016 禁止自动更新后重启

    管理员运行cmd 输入Sconfig, 选择5,选择m

  8. linux上mongodb的安装与卸载

    安装 1.下载安装包 wget http://fastdl.mongodb.org/linux/mongodb-linux-i686-1.8.2.tgz 下载完成后解压缩压缩包 tar zxf mon ...

  9. Java使用 SFTP实现文件上传下载

    package com.lijy.util; import com.jcraft.jsch.Channel; import com.jcraft.jsch.ChannelSftp; import co ...

  10. ALGO-27_蓝桥杯_算法训练_FBI树(树,递归)

    问题描述 我们可以把由“”和“”组成的字符串分为三类:全“”串称为B串,全“”串称为I串,既含“”又含“”的串则称为F串. FBI树是一种二叉树,它的结点类型也包括F结点,B结点和I结点三种.由一个长 ...