可编辑div:contenteditable之ctrl+enter换行，enter发送

最新推荐文章于 2024-07-25 12:17:32 发布

flowersman

最新推荐文章于 2024-07-25 12:17:32 发布

阅读量8.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 jq 文章标签： web 可编辑div jq

本文链接：https://blog.youkuaiyun.com/a5816138/article/details/75142479

前端同时被 2 个专栏收录

23 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了一种使用可编辑DIV实现同时输入文字和表情的方法，并提供了具体的JavaScript代码实现细节，包括如何处理回车键发送消息及Ctrl+回车实现换行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中遇到需要在输入文字的同时输入表情，web微信用的pre，没搞懂怎么弄，所以用了可编辑div。。

        //发送消息可编辑div
        //回车发消息
        $("#textarea").keydown(function($event){
            var keycode = window.event ? $event.keyCode : $event.which;
            var evt = $event || window.event;
            var inputTxt = $(this);
            // 回车-->发送消息
            if (keycode == 13 && !(evt.ctrlKey)) {
                // 发送消息的代码
                woohecc.send_msg();
                $event.preventDefault();
                return false;
            }
            // ctrl+回车-->换行
            if (evt.ctrlKey && evt.keyCode == 13) {
                inputTxt.html(inputTxt.html() + '<br>');
                woohecc.placeCaretAtEnd(inputTxt.get(0));
                return false;
            }
        });

var woohecc = {
    placeCaretAtEnd : function(el) {
            el.focus();
            if (typeof window.getSelection != "undefined"
                && typeof document.createRange != "undefined") {
                var range = document.createRange();
                range.selectNodeContents(el);
                range.collapse(false);
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }
            else if (typeof document.body.createTextRange != "undefined") {
                var textRange = document.body.createTextRange();
                textRange.moveToElementText(el);
                textRange.collapse(false);
                textRange.select();
            }
        },
    }