用于保存文本区域值的enter键

Question

嗨，我有ckeditor和一个保存ckeditor文本的ajax按钮。

<textarea id="editor1" name="editor1"></textarea>
<input type="button" name="send" id="send" value="Send" onclick="save()">

我想删除按钮，当按回车键保存文本与ajax (运行保存功能)，但当按下回车在ckeditor换行。以及如何使用输入交换按钮？

<textarea id="editor1" name="editor1"></textarea>
if (enter press in any where web page ) do save();

Answer 1

重要的是，CKEditor中的内容是一个iframe，所以那些试图检查当前文档上的按键的解决方案将会失败。

解决方案很简单，只需使用CKEditor事件，而不依赖于任何外部库：

var editor = CKEDITOR.replace('editor1');  

editor.on('key', function(ev) {
   if (ev.data.keyCode==13)
   {
       ev.cancel();
       console.log('enter');
   }       
});

你可以在这里测试它：http://jsfiddle.net/zjkSR/ (看看你的控制台)

Answer 2

这是我前段时间为一个网站创建的代码，它允许你在回车时提交，但将允许你按住shift+enter键来创建新行(作为自动提交的文本区)。

它是使用jQuery编写的。

    var  TextBox = $('.autosubmit');
    var code =null;
    // on keypress do this
    TextBox.keyup(function(e)
    {
        // get keycode
        code= (e.keyCode ? e.keyCode : e.which);
        // if keycode is 13 (enter)
        if (code == 13 && e.shiftKey) {
            var content = this.value;
            var caret = getCaret(this);
            this.value = content.substring(0,caret)+"\n"+content.substring(carent,content.length-1);
            event.stopPropagation();
        } else if (code == 13) {
            $(this).closest("form").submit();
        }
    });

    function getCaret(el) {
      if (el.selectionStart) {
         return el.selectionStart;
      } else if (document.selection) {
         el.focus();

       var r = document.selection.createRange();
       if (r == null) {
        return 0;
       }

        var re = el.createTextRange(),
        rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);

        return rc.text.length;
      }  
      return 0;
     }

然而，我不确定它是否能在CK编辑器中工作。最好的方法是在您的配置文件中添加类似下面这样的内容：

config.keystrokes = 
[
    [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ],
    [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ],

    [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ],

    [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ],
    [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ],
    [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ],

    [ CKEDITOR.CTRL + 76 /*L*/, 'link' ],

    [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
    [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
    [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ],

    [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ],
    [ 13, 'save'] // note this line
];

它将在enter上添加save事件，但将保留其他默认击键。

Answer 3

您需要做的是使用jQuery捕获keyup或keydown事件，并检查event的keyCode以查看是否按下了Enter键。

例如：

$('body').on('keyup', function(event){
    if (event.keyCode===13)
    {
        alert('enter key pressed!');
        save();
    }
});

Javascript keyCode参考：http://asquare.net/javascript/tests/KeyCode.html

编辑:哦，误读问题-请参阅更新的答案。将选择器更改为目标正文而不是文本区域，但正如@KevinB所说，这可能是个坏主意。