Question

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

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

创建

Follwing显示为我的代码

$('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

有一个名为mousetrap.js的JS框架，您可以使用它来解决您的问题。你只需要做以下事情。

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

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

这告诉moustrap处理由div生成的 ctrl + 输入事件。
将此脚本添加到您的页面

<强>脚本

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 + 输入

更新：好的，我现在知道了，当用户按下 ctrl + enter <时，你希望光标转到div内的新行/ KBD>。当用户只按输入时，将发送消息。

所以，您需要绑定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

如何使用Jquery使用“CTRL + ENTER”作为“ENTER”

1 个答案: