单击触发器表单提交中的图像

Question

我有一个表单，默认情况下会触发图像提交表单。我不明白为什么点击会触发表单提交。有人可以指导一下吗？

<form name="test1" action="er" method="post" onsubmit="return validateForm()"
<input type="text" id="du" name="du" value="74491" onkeyup="showButton()">
<input type="image" src="../images/save-icon.png" width="20" height="20" ></form>

Answer 1

这是预期的行为。根据标准：

图像类型的输入元素用于创建图形提交 按钮，即提交采用图像形式的按钮 比文本。

Answer 2

输入类型="图像"仅将该图像定义为提交按钮。欲了解更多信息，请查看此内容

Answer 3

请使用<img src=''>

而不是<input type='image'>.

因为输入类型图像会触发默认提交操作！否则，下面是一个示例脚本，该脚本会在您单击图像输入时停止表单提交。

希望我的代码对您有所帮助！

document.addEventListener("click", function(e){
const path=e.path;
for(let i=0;i<path.length-4;i++){
if(path[i].tagName=="INPUT"&&path[i].type=="image"){
var form=path[i].parentNode;
while(form.tagName!="FORM") form=form.parentNode;

let currentSubmitAttr=form.getAttribute("onsubmit");

form.setAttribute("onsubmit", "return false;");
setTimeout(function(){
form.setAttribute("onsubmit", currentSubmitAttr);
}, 100);
}
}
return false;
});

<form action="action.php">
<input type="text" name="du">
<br><br>
<input type='image' src='https://dummyimage.com/300x250/000/fff'>
</form>