Enter 发送，Ctrl+Enter 换行

最新推荐文章于 2024-06-11 15:16:06 发布

原创最新推荐文章于 2024-06-11 15:16:06 发布 · 5.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#enter 发送 # Ctrl+Enter 换行

随笔类专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实现方案，使用户能在聊天应用中使用Enter键发送消息，同时利用Ctrl+Enter组合键进行换行操作，增强用户体验。

实现快捷： 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>
                    <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>