javascript - 如何使用 "CTRL + ENTER"作为 "ENTER"使用 Jquery

Question

请告诉如何使用 Ctrl+Enter↵ 作为 Enter↵ 使用 Jquery。我需要它用于聊天应用程序。

如何使用div创建"<div id="divChatMessage" contenteditable="true"></div>')"

以下显示为我的代码

$('divChatMessage').bind('keyup',function(ev){
    if(ev.keyCode == 13 && ev.ctrlKey){
        if(document.selection && document.selection.createRange){
            this.focus();
            var range = document.selection.createRange();
            range.text = "\r\n";
            range.collapse(false);
            range.select();  
        }else if(window.getSelection){
            //i don't know what to do?
        }  
    }
})

Answer 1

有一个JS框架叫mousetrap.js你可以用它来解决你的问题。您只需执行以下操作。

1. 将 mousetrap.js 添加到您的页面。

2. 添加 mousetrap给你上课 div

   <div id="divChatMessage" class="mousetrap" contenteditable="true" ></div>

   这告诉 moustrap 处理由 div 生成的 ctrl+enter 事件.

3. 将此脚本添加到您的页面

脚本

var $div = $('#divChatMessage');
Mousetrap.bind('ctrl+enter', function(e) {    
    if(e.target === $div[0])
    {
        $('label').append($div.html()+'<br/>');
        $div.html('');
    }
    else{
        e.preventDefault();
    }    
});

这是一个 JSFiddle Demo
提示:输入内容后使用ctrl+enter

更新: 好的，我现在明白了，当用户按下 ctrl+enter< 时，您希望光标转到 div 内的新行/kbd>。当用户仅按下 enter 时，消息将被发送。

因此，您需要同时绑定(bind) enter和 ctrl+enter .

脚本

var $div = $('#divChatMessage');
Mousetrap.bind('ctrl+enter', function (e) {
    if (e.target === $div[0]) {
        $div.html($div.html() + '<br/><br/>');
        var el = $div[0];
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(el.childNodes[el.childNodes.length - 1], el.childNodes[el.childNodes.length - 1].length - 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        el.focus();
    } else {
        e.preventDefault();
    }
});
Mousetrap.bind('enter', function (e) {
    if (e.target === $div[0]) {
        $('label').append($div.html() + '<br/>');
        $div.html('');
    } else {
        e.preventDefault();
    }
});

Demo