Enter 发送,Ctrl+Enter 换行
2018-02-17 15:04
281 查看
实现快捷: Enter 发送,Ctrl+Enter 换行
模拟 qq 聊天窗口
效果图
js部分
html部分
模拟 qq 聊天窗口
效果图
js部分
var keyEnter = document.querySelector('.rongcloud-text'); // 监听事件 键盘按下触发 keyEnter.addEventListener('keydown', function (e) { e = e || window.event; // console.log($(".rongcloud-text").val()); var keyCode = e.keyCode || e.which || e.charCode; var ctrlKey = e.ctrlKey || e.metaKey; // 判断 ctrl+enter 换行 if (ctrlKey && keyCode == 13) { var str = $(".rongcloud-text").val(); $(".rongcloud-text").val(str + "\n"); } else if (keyCode == 13) { // 阻止提交自动换行 e.preventDefault(); // 获取发送按钮id,调用 发送按钮事件 document.getElementById("rong-sendBtn").click(); } }) // 获取 文本域 并清空空格 var $textarea = $(".rongcloud-text").val().replace(/[ ]/g, ""); // 获取 发送按钮 var $sendBtn = $("#rong-sendBtn"); // 判断当 文本域length == 0,设置按钮颜色 if ($textarea.length == 0) { // #0099ff $sendBtn.css('background', 'red'); } // 当 文本域输入信息 弹起时 给 发送按钮 设置背景颜色(提醒用户进入编辑状态) $(".rongcloud-text").keyup(function () { var currentText = $(this).val().replace(/[ ]/g, ""); //console.log(key); if (currentText.length >= 1) { $sendBtn.css('background', 'orange'); } else { $sendBtn.css('background', 'blue'); } }); /* 点击 发送按钮 注册单击事件 */ $('body').on('click', "#rong-sendBtn", function () { // 获取 文本域 输入内容 var contentVal = $('.rongcloud-text').val(); // 当信息为空时,不能发空白信息 if (contentVal == "") { alert("不能发送空白信息"); return false; } // 长度 小于 return if (contentVal.length < 1) { return false; } // 调用 发送函数 sendMssage(targetId, contentVal, doctorName, doctorId); // 清空文本域的值 $(".rongcloud-text").val(""); });
html部分
<!-- 右边聊天窗口 部分 --> <div id="rcs-main" class="rongcloud-kefuListBox rongcloud-container clearfix"> <!-- 左边 --> <div class="rongcloud-kefuList rongcloud-imList"> <div class="rongcloud-rong-header rongcloud-blueBg"> <div class="rongcloud-toolBar rongcloud-headBtn"> <div class="rongcloud-voice"></div> <div class="rongcloud-sprite rongcloud-people"></div> <span class="rongcloud-recent">最近联系人</span> <div class="rongcloud-sprite rongcloud-arrow-down cursor-pointer"></div> </div> </div> <div class="rongcloud-content"> <div class="rongcloud-netStatus" style="display:none"> <div class="rongcloud-sprite"></div> <span>连接断开,请刷新重连</span> </div> <div class="rcs-conversation-list"> <!-- 会话列表每一个会话class="rong-conversation"会话列表中的每一个会话此类名不能被修改--> <div class="rong-conversation" _cid="bb" _mcount="0"> <div class="rongcloud-ext"> <p class="rongcloud-attr"><i class="rongcloud-sprite rongcloud-no-remind"></i></p> </div> <div class="rongcloud-photo"><img class="rongcloud-img" src="http://7xo1cb.com1.z0.glb.clouddn.com/rongcloudkefu2.png" alt=""></div> dd55 ; <div class="rongcloud-info"> <h3 class="rongcloud-nickname"> <span class="rongcloud-nickname_text">用户:小轩轩</span> </h3> </div> </div> <div class="rong-conversation" _cid="2" _mcount="0"> <div class="rongcloud-ext"> <p class="rongcloud-attr"><i class="rongcloud-sprite rongcloud-no-remind"></i></p> </div> <div class="rongcloud-photo"><img class="rongcloud-img" src="http://7xo1cb.com1.z0.glb.clouddn.com/rongcloudkefu2.png" alt=""></div> <div class="rongcloud-info"> <h3 class="rongcloud-nickname"> <span class="rongcloud-nickname_text">用户:小机智</span> </h3> </div> </div> </div> </div> </div> <!-- 右边 --> <div class="rcs-chat-wrapper rcs-chat-im-wrapper"> <div class="rongcloud-kefuChat"> <div id="header" class="rongcloud-rong-header rongcloud-blueBg rongcloud-online"> <div class="rongcloud-infoBar rongcloud-pull-left"> <div class="rongcloud-infoBarTit"> <span class="rongcloud-kefuName">用户:小轩轩</span> </div> </div> <div class="rongcloud-toolBar rongcloud-headBtn rongcloud-pull-right"> <div class="rongcloud-voice"></div> <a class="rongcloud-kefuChatBoxHide rongcloud-sprite" title="隐藏" onclick="minimize()"></a> <a class="rongcloud-kefuChatBoxClose rongcloud-sprite" title="结束对话" onclick="endConversation()"></a> </div> </div> <!-- style="display:none;" --> <div class="rongcloud-outlineBox rcs-connect-status"> <div class="rongcloud-sprite"></div> <span>连接断开,请刷新重连</span> </div> <div id="rcs-message-list" class="rcs-message-box"> <!-- message: 消息list的页面 --> <div class="rongcloud-Messages-history" style="display: block;"><b>查看历史消息</b></div> <div class="historyBox"> </div> <div class="rong-message-list"> </div> <div class="rongcloud-Messages-history" style="display: block;"><b>查看历史消息</b></div> <div class="rongcloud-Messages-date"> <b>14:42</b> </div> <!-- 我 --> <div class="rongcloud-Message rongcloud-clearfix rongcloud-Message-send " id="rcs-templte-message-text"> <div> <div class="rongcloud-Message-header"> <img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="http://7xo1cb.com1.z0.glb.clouddn.com/rongcloudkefu2.png" alt=""> <div class="rongcloud-Message-author rongcloud-clearfix"> <a class="rongcloud-author"> 我 </a> </div> </div> </div> <div class="rongcloud-Message-body"> <div class="rongcloud-Message-text"> <pre class="rongcloud-Message-entry">新年快乐</pre> </div> </div> </div> <!-- 用户 --> <div class="rongcloud-Message rongcloud-clearfix " id="rcs-templte-message-text"> <div> <div class="rongcloud-Message-header"> <img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="http://7xo1cb.com1.z0.glb.clouddn.com/rongcloudkefu2.png" alt=""> <div class="rongcloud-Message-author rongcloud-clearfix"> <a class="rongcloud-author"> 用户:小轩轩 </a> </div> </div> </div> <div class="rongcloud-Message-body"> <div class="rongcloud-Message-text"> <pre class="rongcloud-Message-entry">你好</pre> </div> </div> </div> <div class="rongcloud-emptyBox">暂时没有新消息</div> </div> <div id="rcs-chat-box" class="rongcloud-rong-footer"> <div class="rongcloud-footer-con"> </div> <!-- 请输入文字 发送 --> <div class="rongcloud-footer-input"> <div class="rongcloud-footer-textarea"> <textarea class="rongcloud-text rongcloud-grey" placeholder="请输入文字..."></textarea> </div> <button type="button" style="background-color: #0099ff;" class="rongcloud-rong-btn rongcloud-rong-send-btn" id="rong-sendBtn">发送</button> </div> </div> </div> </div> </div>
相关文章推荐
- asp.net textbox javascript实现enter与ctrl+enter互换 文本框发送消息与换行(类似于QQ)
- Delphi中使用TRichEdit或TMemo模仿QQ按Ctrl+Enter发送信息,屏蔽换行
- asp.net textbox javascript实现enter与ctrl+enter互换 文本框发送消息与换行(类似于QQ)
- 飞秋发送消息的快捷键改为 ctrl+enter
- js实现按Ctrl+Enter发送效果
- 如何把SKYPE的发送消息由enter改为ctrl+enter?
- angular 回车事件(回车发送,回车加ctrl 换行)
- js实现按Ctrl+Enter发送效果
- Textarea ctrl+enter实现换行,用enter实现表单提交
- ueditor的ctrl+enter和enter切换提交并且禁止换行
- 设置ENTER为发送键,避免发送后还换行
- Ctrl+Enter发送
- jquery捕捉ctrl+enter(回车)事件
- PyCharm使用技巧:Shift + Enter(快速换行)
- 如何设置用Ctrl+Enter提交表单
- Ctrl+Enter提交内容信息
- 【求助】python中subprocess向cmd发送命令行,怎么发送ctrl+c的命令?
- jquery捕捉ctrl+enter(回车)事件
- C# 窗体(Form)中如何实现全局快捷键 如:[Ctrl + Enter]