Question

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

我到目前为止尝试过：

e.preventDefault()
e.stopPropagation()

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

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

使用JSF 2.3

JQuery解决方案也没问题。

Answer 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>

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试以下代码：

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

阻止在Enter上提交但允许在TextArea

3 个答案: