您的位置:首页 > 其它

Enter 发送,Ctrl+Enter 换行

2018-02-17 15:04 281 查看
实现快捷: Enter 发送,Ctrl+Enter 换行

模拟 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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: