当我在文本框上按Enter键时，为什么要提交表单？

Question

HTML：

<form name="prints" method="post" action="">
    <input type="text" name="quantity_914" id="quantity_914" value="1" style="width:20px;" onblur="prints_change_quantity(event, this);" onkeyup="return prints_change_quantity(event, this); return false;" />
</form>

Javascript：

function prints_change_quantity(e, element)
{
  var pid = element.id.replace('quantity_');

  var code = (e.keyCode ? e.keyCode : e.which);
  if("blur" == e.type || ("keyup" == e.type && code == 13)) 
  { 
    e.preventDefault();
    console.log(element.value);
  }

  return false;
}

Answer 1

取消按键事件不会阻止提交表单。 您需要改用按键或按键。

Answer 2

使用按键事件而不是使用keyup。

<form action="#">
  <input type="text" name="txt" onkeypress="handle" />
</form>

<script>
function handle(e){
    if(e.keyCode === 13){
        alert("Enter was pressed was presses");
    }

    return false;
 }
</script>

Answer 3

如果您要使用现有功能而不希望提交表单，则可以使用jquery并阻止表单与现有功能一起提交。

例

$(document).ready(function(){
  $("#prints").submit(function (e) {
      e.preventDefault(); // this will prevent from submitting the form.
  });
});

我在表单中添加了打印ID，或者您可以使用名称选择器或其他选择器...

另外，如果您希望能够在某个时候提交表单，则可以在表单上添加一个用于按键的jquery处理程序，如果返回键将其取消，则可以。

$('#prints').keypress(function(e){    
 if ( e.which == 13 ) e.preventDefault();
});

例子2

Answer 4

默认情况下，当您按Enter进入html表单时会触发keyDown事件。 每当将事件附加到onkeyUp属性时，表单都会执行Enter键操作并提交表单，因为它没有任何效果，但是，如果您明确指定onkeyDown事件，则return prints_change_quantity(event, this); 被调用，因此表单不会被提交。 更改您的html代码以调用JavaScript函数，如下所示：

<form name="prints" method="post" action="">
    <input type="text" name="quantity_914" id="quantity_914" value="1" style="width:20px;" onblur="prints_change_quantity(event, this);" onkeydown="return prints_change_quantity(event, this); return false;" />
</form>

希望这可以帮助。