防止在 Enter 上提交，但允许在 TextArea 中输入 newLine [重复]答案

【问题标题】：Prevent submit on Enter but allow Enter for newLine in TextArea [duplicate]防止在 Enter 上提交，但允许在 TextArea 中输入 newLine [重复]
【发布时间】：2018-04-26 05:30:30
【问题描述】：

是否可以阻止回车键提交表单，但允许回车键在输入中工作。（例如textArea换行）？

到目前为止我试过了：

e.preventDefault()
e.stopPropagation()

两者都在表单标签onkeyup="if (e.keyCode == 13))"

这确实阻止了在输入键上提交表单，但它也阻止了输入键完全在表单域中工作。我想要实现的是，当我在 TextArea 内按下回车键时，它会创建一个 newLine，但是当我在 input type="text" 中按回车键时，它不会提交表单。

使用 JSF 2.3

jQuery解决方案也可以。

【问题讨论】：

如果没有代码，将很难为您提供帮助，但我怀疑您将事件侦听器绑定到表单，因为您只需将其绑定到您想要实际侦听的输入
@3Dos 是的，我将事件侦听器绑定到整个表单。否则我将不得不为每个我不想做的input 标签单独添加一个监听器。

标签： javascript jquery html jsf

【解决方案1】：

您可以测试关注的元素是否不是您的textarea，如下所示：

var area = document.getElementById('area');

document.getElementById('doesntSubmit').addEventListener('keydown', function (e) {
  if (e.keyCode === 13 && e.target !== area) {
    e.preventDefault();  
  }
});

<form id="doesntSubmit">
  <input type="text" value="whatever"/>
  <textarea id="area"></textarea>
</form>

或者您可以将data- 标记添加到您不希望受到影响的元素或特定类...以避免检查标记。

您还可以将 css class 添加到不应在输入时提交表单的元素并在其上绑定事件处理程序：

$('.doesntSubmit').keydown(function (e) {
  if (e.keyCode === 13) {
    e.preventDefault();  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="doesntSubmit" value="whatever"/>
  <textarea id="area"></textarea>
</form>

【讨论】：

谢谢，我认为这应该可行，但如果可能的话，我不想检查标签。这可能吗？

【解决方案2】：

$(document).keypress(function(e) {
  if(!$(".specialClass").is(":focus")){
    e.preventDefault();
    if(e.which == 13) {
        console.log('You pressed enter!');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <textarea name="text" class="specialClass">Text</textarea><br>
  <input type="submit">
</form>

【讨论】：

【解决方案3】：

试试下面的代码：

if(event.keyCode === 13 && event.target.type !== 'textarea') {
            event.preventDefault();
            return false;
        }

【讨论】：