如何检测「shift+enter」并在 Textarea 中生成新行？

问题描述

目前，如果该人员在文本区域内按 enter，表单将提交。好的，我想要的

但是当他们键入 shift + enter 时，我想要 textarea 移动到下一行：n

如何在 JQuery 或简单的 JavaScript 中尽可能简单？

最佳解决方案

我想你可以这样做

编辑：将代码更改为工作，无论插入符号位置如何

代码的第一部分是获取插入位置。

参考：Caret position in textarea, in characters from the start

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;
}

然后将 Shift + Enter 相应地替换为 textarea 值，如果单独按 Enter，则提交表单。

$('textarea').keyup(function (event) {
    if (event.keyCode == 13) {
        var content = this.value;
        var caret = getCaret(this);
        if(event.shiftKey){
            this.value = content.substring(0, caret - 1) + "n" + content.substring(caret, content.length);
            event.stopPropagation();
        } else {
            this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
            $('form').submit();
        }
    }
});

这是一个 demo

次佳解决方案

首先，在文本区域内按 Enter 不提交表单，除非您有脚本来做到这一点。这是用户期望的行为，我建议不要更改它。但是，如果您必须这样做，最简单的方法是找到正在使 Enter 提交表单并进行更改的脚本。代码将有类似的东西

if (evt.keyCode == 13) {
    form.submit();
}

… 你可以改变它

if (evt.keyCode == 13 && !evt.shiftKey) {
    form.submit();
}

如果您由于某些原因无法访问此代码，则您需要执行以下操作以使其在所有主要浏览器中正常工作，即使插入符不在文本末尾：

jsFiddle：http://jsfiddle.net/zd3gA/1/

码：

function pasteIntoInput(el, text) {
    el.focus();
    if (typeof el.selectionStart == "number"
            && typeof el.selectionEnd == "number") {
        var val = el.value;
        var selStart = el.selectionStart;
        el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
        el.selectionEnd = el.selectionStart = selStart + text.length;
    } else if (typeof document.selection != "undefined") {
        var textRange = document.selection.createRange();
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    }
}

function handleEnter(evt) {
    if (evt.keyCode == 13 && evt.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "n");
        }
        evt.preventDefault();
    }
}

// Handle both keydown and keypress for Opera, which only allows default
// key action to be suppressed in keypress
$("#your_textarea_id").keydown(handleEnter).keypress(handleEnter);

第三种解决方案

这些答案中的大多数过于复杂。为什么不这样尝试呢？

$("textarea").keypress(function(event) {
        if (event.keyCode == 13 && !event.shiftKey) {
         submitForm(); //Submit your form here
         return false;
         }
});

不要在插入符号位置或插入行中插入 JS 。基本上，如果按下 shift 键，功能将不会运行，因此允许进入/返回键执行其正常功能。

第四种方案

为什么不只是

$(".commentArea").keypress(function(e) {
    var textVal = $(this).val();
    if(e.which == 13 && e.shiftKey) {

    }
    else if (e.which == 13) {
       e.preventDefault(); //Stops enter from creating a new line
       this.form.submit(); //or ajax submit
    }
});

第五种方案

使用 jQuery hotkeys 插件和此代码

jQuery(document).bind('keydown', 'shift+enter',
         function (evt){
             $('textarea').val($('#textarea').val() + "n");// use the right id here
             return true;
         }
);

参考文献

How do I detect 「shift+enter」 and generate a new line in Textarea?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何检测「shift+enter」并在 Textarea 中生成新行？