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

Posted 2023-05-07

【中文标题】将换行符添加到 textarea 而不是提交表单

【英文标题】：Add new line character to textarea instead of submitting form

【发布时间】：2012-12-10 19:35:11

【问题描述】：

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

【问题讨论】：

没有我正在使用 Spring mvc，但这是一个简单的 html 表单。

好伙伴 shift+enter 作为默认工作，随心所欲

我知道 shift+enter 会这样做，但普通用户通常不知道，我想禁用它并使用 js 或 jquery 添加换行符。

我不知道答案，但看起来问题正在限制提交操作，在输入按钮点击时。

检查你的html代码是否正确

【参考方案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();
    ;
  
)