如何檢測「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 中生成新行？