在文本框中按Enter键提交值，按Shift + Enter键应该进入下一行。

Question

我希望有一个聊天框（textarea），如果用户按下Enter，则应提交聊天，如果用户按下Shift+Enter，则应进入新行。

我尝试了一些东西，但无法弄清楚确切的keyup或keydown事件。目前我使用的代码是：

$("textarea").keydown(function(e){
    if (e.keyCode == 13 && !e.shiftKey)
    {
        e.preventDefault();
    }
}); 

jsFiddle

此外，当按下Enter + Shift键时，我希望能够在相应位置放置\n。

编辑

我的代码问题是：

当我使用警报在客户端检查内容时，它会显示下一行。但是当我将其发布到我的Rails后端时，它只是一个简单的字符串。没有新行。这是我向Rails服务器发送聊天消息的方式。

  $.post("/incomingchat", { body:$("#chat_" + group_id).val() },
   function(data){
        // do something..
    });

- Mohit Jain

---

请不要仅仅提供jsfiddle的链接，一定要将代码包含在问题中。 - Matt

你发布的代码有什么问题吗？在我看来，它完全按照你描述的方式工作。http://jsfiddle.net/Su5ts/25/ - ChrisR

@Matt 抱歉，我会记住这件事的。 - Mohit Jain

Answer 1

$("textarea").keydown(function(e)
{
    if (e.keyCode == 13)
    {
        if (e.shiftKey) {
            $(this).val( $(this).val() + "\n" );
        }
        else {
            submitTheChat();
        }
    }
});

- AndreyKo

---

问题在于当我使用Jquery将这些数据发布到后端服务器时。如何识别回车+换行键？在后端，它与没有回车+换行键是相同的。 - Mohit Jain

Answer 2

我之前已经回答过这个问题了。如果插入符号不在文本区域的末尾，这就有点棘手:

如何检测“shift+enter”并在文本区域中生成新行？

- Tim Down

---

问题在于当我使用Jquery将这些数据发送到后端服务器时。我该如何识别回车+换行键？在后端，这与不使用回车+换行键是相同的。 - Mohit Jain

@Mohit：我不明白。按下shift+enter后，文本区域的值将包含一个换行符，并且当您发布时，这个换行符一定会被提交到服务器。 - Tim Down

@TimDown：我有一个相关的问题。在Chrome中，如果我处理按键事件时，当按下回车键时添加新行字符'\n'，并且如果文本区域是可滚动的，则滚动条将无法工作，我的意思是如果我按下回车键，当我输入时，文本区域不会滚动。你对这个问题有什么想法吗？ - Jack Cood

Answer 3

考虑使用keypress事件代替。如果你在jsfiddle中运行代码，你会发现按回车键时不会添加新行。

$("textarea").keypress(function(e){
    if (e.keyCode == 13 && !e.shiftKey)
    {        
        e.preventDefault();
        //now call the code to submit your form
        alert("just enter was pressed");
        return;
    }

    if (e.keyCode == 13 && e.shiftKey)
    {       
        //this is the shift+enter right now it does go to a new line
        alert("shift+enter was pressed");        
    }    
});

- pedrodg

---

问题在于当我使用Jquery将这些数据发布到后端服务器时。如何识别回车+换行键？在后端，它与没有回车+换行键是相同的。 - Mohit Jain

好的，我明白了。在这种情况下，我建议看一下Tim Down在上面发布的回复。 - pedrodg