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

取消keydown事件不会停止提交表单。您需要使用按键或键盘。

Answer 2

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

<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并阻止表单使用现有功能提交。

Example

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

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

或者，如果您希望能够在某个时刻提交表单，您可以在表单上为keypress添加一个jquery处理程序，如果它的返回键取消它。

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

Example 2

Answer 4

默认情况下，当您为html表单按Enter键时会触发事件keyDown。每当您将事件附加到onkeyUp属性时，表单将采用回车键操作并提交表单，因为它无效，但是如果您明确指定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>

希望这有帮助。

当我在文本框中输入时，为什么我的表单会提交？

4 个答案: