javascript - 如何检测 "shift+enter"并在 Textarea 中生成新行？

Question

目前，如果用户在文本区域内按下 enter，表单将提交。
很好，我想要那个。

但是当他们键入 shift + enter 时，我希望文本区域移动到下一行:\n

如何在 JQuery 或纯 JavaScript 中尽可能简单地做到这一点？

Answer 1

简单优雅的解决方案:

首先，在文本区域内按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);