禁止在 Enter 时提交，但允许在文本区域中输入换行符

Question

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

到目前为止我尝试过：

• e.preventDefault()
• e.stopPropagation()

在表单标记上onkeyup="if (e.keyCode == 13))"

这确实会阻止在 Enter 键上提交表单，但也会阻止 Enter 键在模板字段中完全工作。我想要实现的是，当我在 TextArea 中按回车键时，它会创建一个换行符，但当我在input type="text"中按回车键时，它不会提交表单。

使用 JSF 2.3

JQuery解决方案也可以。

Answer 1

获取按键事件，然后检查 specialClass 是否不是 ：focus 并检查按下的键(13 = Enter 键(

$(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>

Answer 2

您可以测试聚焦的元素是否不是您的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>

Answer 3

尝试以下代码：

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