2

请告诉如何使用Ctrl+Enter↵</kbd> as Enter↵</kbd> using Jquery. I need it for chatting application.

如何使用 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?
        }  
    }
})
4

1 回答 1

0

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

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

  2. mousetrap给你的 div添加类

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

    ctrl这告诉moustrap 处理enter由div.

  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好的，我现在明白了，当用户按下+时，您希望光标转到 div 内的新行enter。当用户按下时，只会enter发送消息。

因此，您需要同时绑定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

于 2013-11-04T07:50:36.867 回答