当在HTML字段上单击enter时，试图添加一些表单控件，结果不一致

Question

我有一个用Firefox运行的HTML表单，它看起来像这样：

<form name="transfer" id = "transferForm" action='transfer.php' method='POST'>
<div>
<input id="itemSelect" name="itemSelect"/>
<input type="number" name="quantity" id="quantity" value="1"
onkeypress="return isNumberKey(event)"/>
<input type="button" value="Add" id="addButton" style="width:83px" 
onclick="addItem()"/>
</div>
<div>
<span id="myForm"></span>
<button id='save' name = 'save' style="width:205px">Save</button>
<button id='transfer' name='transfer' style="width:205px"/>Transfer</button>
</div>
</form>

需要注意的几点：-itemSelect是在其他地方初始化的dojo/dijit组合框。-addButton中的函数addItem()运行一些javascript，每次单击添加按钮时都会在span myForm中创建新元素。单击保存或转移按钮后，transfer.php将处理这些文件。

一切都很好，但我想添加一些用户友好的控件，这样表单就可以在没有鼠标点击的情况下工作。我希望用户能够在"quantity"字段中按"Enter"，并让表单运行addItem()javascript并将焦点移回"itemSelect"。

这是我添加的javascript。首先，在输入表单时禁用默认提交：

<script language="JavaScript">
window.addEventListener('keydown',function(e)
{if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13)
{if(e.target.nodeName=='INPUT'&&e.target.type=='text')
{e.preventDefault();return false;}}},true);

然后我在"数量"中添加一个事件侦听器

document.getElementById("quantity").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
//document.getElementById("addButton").click();
addItem(); //Same results using this or the line above
document.getElementById("itemSelect").focus(); //move focus back to the combo box
}
}); 
</script>

乍一看，它似乎可以工作，但我遇到了两个不同的故障。

1. 有了这段代码，如果我按enter键运行addItem()函数，这一行就会添加到span标记之间的表单上，但当我单击"保存"或"转移"提交以这种方式添加的行时，不会POST。在transfer.php中，已经添加的行会显示()，但通过单击enter添加的任何新行都不会通过。然而，如果我只是点击"addButton"添加一行，而不是按enter键，那么POST就可以了。

2. 当我用键盘测试添加行时，按TAB-ENTER-TAB-ENTER。。。，它运行良好，但在大约第4个周期后，表单突然提交给transfer.php。

那么#1可能出了什么问题，#2是如何发生的？

Answer 1

尝试以下操作：

从HTML中删除内联事件处理程序
问题的分离

知道onKeyPress与onKeyUp和onKeyDown之间的区别
堆栈溢出问题

进入时阻止表单提交：

document.getElementById("transferForm").addEventListener("keypress", function (e) {
e = e || event;
var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
})

在输入数量时调用addItem进入

document.getElementById("quantity").addEventListener("keypress", function (event) {
var keyCode = event.keyCode || event.which;
if (keyCode === 13) {
event.preventDefault();
addItem();  // addItem function call
}
});

点击添加按钮调用addItem

document.getElementById("addButton").addEventListener("click", addItem);
function addItem() {
// addItem code    
}

缓解浏览器与jQuery等javascript库的不一致
在代码中，您可能已经注意到使用which获取密钥代码值。

然而，jQuery根据浏览器是否支持event.which、event.keyCode或event.charCode来规范event.which: