使用输入类型图像时无法导航到 IE 和 Edge 中的表单操作答案

【问题标题】：Unable to navigate to form action in IE and Edge when using input type image使用输入类型图像时无法导航到 IE 和 Edge 中的表单操作
【发布时间】：2019-01-10 03:40:14
【问题描述】：

在 IE 和 Edge 的表单内使用带有 formaction 属性的图像输入时，单击输入图像不会导航到指定的 formaction 外部 URL。如果您当前正在 Chrome 中查看此问题并运行下面的代码 sn-p，它将正确打开 Apache 网站。但是，如果您在 Edge 中重新打开此页面，您会发现单击该按钮不起作用。但是，如果您将输入类型更改为提交，则一切正常。有谁知道为什么会发生这种情况，或者是否在任何地方都有记录？

<form method='POST' id='loginForm'>
  <input type='image' formaction='https://apache.org' src='http://apache.org/images/SupportApache-small.png' height='20%'  />
</form>

【问题讨论】：

标签： html forms input internet-explorer-11 microsoft-edge

【解决方案1】：

我用你的代码做了一个测试，我能够产生这个问题。看起来 IE 和 MS Edge 在输入类型 Image 中的 formaction 存在一些问题。

解决方法是从图像中删除 formaction 并将其放入如下表格中。

<!doctype html>
<head>
</head>
<body>
<form method='POST' id='loginForm' action="https://apache.org">
  <input type='image'  src='http://apache.org/images/SupportApache-small.png' height='20%'  />
</form>
</body>
</html>

在 IE 中的输出：

您将在 MS Edge 和其他浏览器中获得类似的输出。

【讨论】：

我的实际场景有多个提交按钮，这就是为什么我对每个输入使用 formaction 属性而不是表单上的 action 属性。我的问题应该更清楚。另外，我猜有很多方法可以用 javascript 解决这个问题，但如果可能的话，我希望有一个非 javascript 解决方案。
我尝试使用 HTML 找到解决方案，但似乎没有任何解决方案或解决方案可用于此问题。所以最好用JS来解决这个问题。如果您可以使用 JS，请告诉我。我将尝试使用 JS 来解决此问题。我已经向 MS Edge 提交了有关此问题的反馈。

【解决方案2】：

虽然 OP 没有特别要求解决方案，只是为了解释/文档，但我发布了一个解决方法（使用 jquery），以防有人来这里寻找：

$(document).ready(function ($) {
  $('form').submit(function () {
    var btn = $(this).find("input[type=image]:focus");
    if (btn.length == 1) {
        this.action = btn[0].formAction;
    }
  });
}

【讨论】：