我创建了一个表单来运行JavaScript函数，以根据输入生成零件号。输入只能是某些值，因此如果输入不是有效输入，则会显示错误。
“重置表单”按钮有效，“提交”按钮有效，但仅在单击时有效。我想在Enter上提交表单，这就是问题所在。它运行该功能，但随后刷新（或重置，无法弄清）表格。
我查看了Enter上提交的其他选项，但是除非删除表单标签，否则它不起作用，这最终破坏了该工具的主要用途。
在代码中，我缩短了库，因为它很长。
<script>
var input = document.getElementById("deconstructSubmit");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("deconstructSubmit").click();
}
});
function resetForm() {
document.getElementById("myForm").reset();
document.getElementById("verify").classList.remove("is-invalid");
document.getElementById("form-error-2").classList.add("hide");
document.getElementById("form-error-1").classList.add("hide");
document.getElementById("config").classList.add("hide");
document.getElementById("STO").classList.add("hide");
document.getElementById("warningHz").classList.add("hide");
document.getElementById("warningMains").classList.add("hide");
}
function deconstructor() {
var typeCode = document.getElementById("myInput").value;
typeCode = typeCode.replace(/\s/g, '');
typeCode = typeCode.toUpperCase();
var library = ["I55AE125A10V01000S", "I55AE125A10V01001S", "I55AE125A10V01002S", "I55AE125A10V01003S"];
if (library.indexOf(typeCode) === -1) {
if (typeCode === "") {
document.getElementById("verify").classList.add("is-invalid");
document.getElementById("form-error-2").classList.add("hide");
document.getElementById("form-error-1").classList.remove("hide");
document.getElementById("config").classList.add("hide")
} else {
document.getElementById("form-error-1").classList.add("hide");
document.getElementById("form-error-2").classList.remove("hide");
document.getElementById("verify").classList.add("is-invalid");
document.getElementById("config").classList.add("hide")
}
} else {
document.getElementById("config").classList.remove("hide")
document.getElementById("form-error-2").classList.add("hide");
document.getElementById("form-error-1").classList.add("hide");
document.getElementById("verify").classList.remove("is-invalid");
/* Control Unit */
var fieldBus = typeCode.substring(14, 17);
switch (fieldBus) {
case "000":
fb = "0";
io = "2"
break;
case "001":
fb = "0";
io = "3"
break;
case "002":
fb = "C";
io = "2"
break;
case "003":
fb = "W";
io = "2"
break;
case "00W":
fb = "V";
io = "2"
break;
case "004":
fb = "P";
io = "2"
break;
case "00K":
fb = "T";
io = "2"
break;
case "00L":
fb = "R";
io = "2"
break;
case "00M":
fb = "G";
io = "2"
break;
case "012":
fb = "N";
io = "2"
break;
}
var controlUnit = 'I5CA5' + fb + '0' + io + '000VA1000S';
document.getElementById("CUTC").innerHTML = controlUnit;
/* Power Unit */
var ratedPower = typeCode.substring(5, 8);
var voltage = typeCode.substring(8, 9);
var powerUnit = 'I5DAE' + typeCode.substring(5, 8) + typeCode.substring(8, 9) + '10V' + typeCode.substring(12, 13) + '0000S';
document.getElementById("PUTC").innerHTML = powerUnit;
/* STO */
var safeTorque = typeCode.substring(10, 11);
if (safeTorque === "A") {
document.getElementById("STO").classList.remove("hide");
} else {
document.getElementById("STO").classList.add("hide");
}
/* Hz Check */
if (typeCode.substring(13, 14) === "0") {
document.getElementById("warningHz").classList.remove("hide");
} else {
document.getElementById("warningHz").classList.add("hide")
}
/* Mains Choke Check */
var i = typeCode.substring(5, 8);
i = parseInt(i);
if (i >= 322) {
document.getElementById("warningMains").classList.remove("hide");
} else {
document.getElementById("warningMains").classList.add("hide")
};
}
};
</script>
<body>
<div class="mainContainer doc-mainContainer">
<div class="has-limited-width">
<div class="grid-row">
<div class="span-6 grid-columns">
<div class="deconfig">
<form id="myForm">
<fieldset>
<legend>i550 type code de-constructor tool</legend>
<div id="verify" class="formField is-text is-mandatory">
<label class="formField-label" for="field-id">Enter type code</label>
<input class="formField-input" type="text" id="myInput" value="">
<span id="form-error-1" class="formField-message hide">Please enter type code</span>
<span id="form-error-2" class="formField-message hide">Invalid type code</span>
</div>
</fieldset>
</form>
<button class="is-cta" id="deconstructSubmit" onclick="deconstructor()" type="submit">De-construct</button>
<input class="is-cta" id="resetForm" type="reset" onclick="resetForm()" value="Reset form">
<div class="deconfig hide" id="config">
<h2>Type codes</h2>
<table class="table">
<tbody>
<tr>
<th scope="row">
Control Unit:
</th>
<td>
<span id="CUTC"></span>
</td>
</tr>
<tr>
<th scope="row">
Power Unit:
</th>
<td>
<span id="PUTC"></span>
</td>
</tr>
<tr id="STO" class="hide">
<th scope="row">
Safe Torque Off (STO):
</th>
<td>
I5MASV000000S
</td>
</tr>
</tbody>
</table>
<p class="hide red" id="warningHz">Please note that this is a 50Hz drive</p>
<p class="hide red" id="warningMains">Inverters starting with 30 hp (22 kW) must always be used together with mains chokes.</p>
</div>
</div>
</div>
</div>
</div>
</div>
无论是通过单击还是输入提交，它都应运行该表格并提供正确的输出。
答案 0 :(得分：0)
我可以通过向表单标签添加action="#"来解决此问题。