<!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. react-router v4 实现路由拦截的一种思路（待验证）

    出处:https://segmentfault.com/q/1010000010905474

  2. Appium Desktop Inspector 安卓真机配置（Windows）

    本文是基于 Windows环境 通过Appium Desktop 测试真机,首先要确保测试机已经和电脑正确连接(将手机和电脑通过USB数据线连接,手机打开USB调试) 确认电脑与手机是否连接成功的方法 ...

  3. 运用MQTT-JMeter插件测试MQTT服务器性能

    今天我们介绍XMeter团队带来的新版MQTT-JMeter插件,您可以更为方便地添加MQTT连接.发布.订阅取样器,构造组合的应用场景,例如背景连接.多发少收.少发多收,计算消息转发时延等.利用该插 ...

  4. JMeterPlugins插件监听器学习－监听器

    JMeterPlugins插件监听器学习-监听器 1.jp@gc - Actiive Threads Over Time:不同时间活动用户数量展示(图表)2.jp@gc - AutoStop List ...

  5. C# 打印、输入和for循环的使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. Request method 'POST' not supported

    总是报错,原来是form表单的锅,赶紧删了.

  7. BT.656 NTSC制式彩条生成模块(verilog)

    BT.656 NTSC制式彩条生成模块(verilog) 1.知识储备 隔行扫描是将一副图像分成两场扫描,第一场扫描第1,2,5,7...等奇数行,第二场扫描2,4,6,8...等偶数行,并把扫奇数行 ...

  8. django 初始化 介绍 生命周期

    安装好django,配置模板,静态文件 # 创建Django工程 django-admin startproject [工程名称] mysite - mysite # 对整个程序进行配置 - init ...

  9. KMP(字符串匹配)算法

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  10. 移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...