将换行符添加到 textarea 而不是提交表单答案

【问题标题】：Add new line character to textarea instead of submitting form将换行符添加到 textarea 而不是提交表单
【发布时间】：2012-12-10 19:35:11
【问题描述】：

我有一个带有文本区域的表单，按回车键提交我的表单。我怎样才能让它添加一个换行符而不是一个表单提交。

【问题讨论】：

没有我正在使用 Spring mvc，但这是一个简单的 html 表单。
好伙伴 shift+enter 作为默认工作，随心所欲
我知道 shift+enter 会这样做，但普通用户通常不知道，我想禁用它并使用 js 或 jquery 添加换行符。
我不知道答案，但看起来问题正在限制提交操作，在输入按钮点击时。
检查你的html代码是否正确

标签： javascript jquery html textarea

【解决方案1】：

$('textarea').keypress(function(event) {
   if (event.which == 13) {
      event.stopPropagation();
   }
});

JSFiddle Demo

【讨论】：

好吧，我本来想先回答这个问题，但我对/n 或\n 感到困惑；）
这个（以前的版本）实际上在文本的末尾添加了一个新行——但是如果你在文本的中间输入呢？我已经相应地编辑了这个。 — 正如杰克·库德（Jack Cood）提到的那样，一个问题仍未解决：在最后一个可见行中添加新行意味着您必须调整滚动条。 — 我只是 super 很困惑，这不是开箱即用的。这样的错误！
简单有效的解决方案！但是，我仍然建议使用 vanilla JS 方式，即element.addEventListener('keypress', event => ...)'

【解决方案2】：

你可以试试这个代码：

$(document).ready(function() {
  $("textarea").keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

【讨论】：

这会在整个窗口中禁用它，这可能不是有意的。您应该将其范围限定为有问题的输入框。
这会禁用回车键，并且不能向 textarea 添加新行。

【解决方案3】：

这应该会有所帮助

$('#myProblematicForm textarea').keypress(function(event) {
  if (event.which == 13) {
    event.preventDefault();
    this.value = this.value + "\n";
  }
});

对于它的价值，我在 OS X 上使用 Chrome 并且 Enter 为我在文本区域中插入一个 \n 并且默认情况下 not 提交表单。

【讨论】：

好吧，我也在使用谷歌浏览器，但在 Windows 上，它默认不添加换行符！
@maček：您的解决方案有效，但我遇到了 Chrome 问题。如果 textarea 是可滚动的，当我按下回车键时，滚动条不起作用，我的意思是它不会滚动到新行。对这个问题有什么想法吗？
这会在 textarea 中添加一个新行，但仍会提交表单。需要return false。但是有了这个解决方案，除了文本区域的末尾之外，我无法在其他任何地方添加新行。

【解决方案4】：

以前的答案不处理拆分 textarea 的当前值，而只是附加一个换行符。以下内容阻止事件冒泡到表单，并且仍然允许“输入”上的典型文本区域行为。

$('textarea').keydown(function(event) {
  if (event.keyCode === 13) {
    event.stopPropagation();
  }
});

【讨论】：

【解决方案5】：

$(document).ready(function(){
$("#text").keypress(function(event) {   
   if (event.which == 13) { 
      var s = $(this).val();
      $(this).val(s+"\n");  //\t for tab
   }
});      
});

这可以通过我上面给出的 jquery 代码来完成。必须注意，上面的脚本在HTML输入字段代码之前编写时需要使用ready函数，而在输入字段代码之后编写则不需要。如果它不起作用，请尝试使用\t代替\ n 它会起作用的。

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。请阅读此how-to-answer 以提供高质量的答案。
感谢@thewaywewere 的建议，请参阅我编辑的答案，希望对您有所帮助。

【解决方案6】：

$(document).ready(function() {
  $('textarea').keydown(function(event){
    if (event.keyCode == 13) {
      event.preventDefault();
      var s = $(this).val();
      $(this).val(s+"\n");
    }
  });
});

【讨论】：

【解决方案7】：

这对我有用

$(document).keypress(function(e) {
if(e.which == 13) {
    if(document.activeElement.tagName != "TEXTAREA") {
        e.preventDefault();
    };
  }
})

【讨论】：