javascript - 如何使 INPUT TYPE ="IMAGE"不在 WebKit 中按 Enter 提交？

Question

在 C#/ASP.NET 应用程序中，我有一个呈现如下所示的表单(还有很多，但这才是最重要的):

<form method="post" action="">
<input type="image" name="ctl15" src="cancel.gif" style="border-width:0px;" />
    <!-- Server side, the above input is a System.Web.UI.WebControls.ImageButton. -->
...more extra fluff...
<input type="submit" name="Button1" value="Proceed" id="Button1" class="button"
    style="width:59px;" />
</form>

此表单在 Internet Explorer 和 Firefox 中工作得很好，但在基于 WebKit 的浏览器(Safari 和 Chrome)中失败。问题在于，当用户在输入字段中按下 Enter 时，而不是使用鼠标单击提交按钮，图像输入被激活(在这种情况下对应于取消事件，与“继续”正好相反“给定相关 UI 的自然行为)。

我想做的是，在 Enter 键上，激活 <input type="submit">按钮而不是 <input type="image"> , 而不会通过单击图像中断提交。我怎样才能做到这一点？最好以跨浏览器的方式进行，这样我就不需要代码中的更多特殊情况。

请不要使用 jQuery 解决方案，因为这个应用程序不使用它(并且为这样一个“简单”的东西引入一个全新的库将是一个非常困难的事情) - 不过，普通的 JavaScript 非常好。显然，最好的办法是只用 HTML 和 CSS 来完成，但我怀疑这样做的可行性。

本质上，这个问题在我看来与 HTML: Submitting a form by pressing enter without a submit button 完全相反。 .

不幸的是，由于 UI 的不同部分由不同的类呈现并保存在单独的 .aspx 文件中(具体来说，<input type="image"> 在一个地方，而 <input type="submit"> 在另一个地方)，重新排序元素生成的 HTML 也不是真正可行的解决方案。

Answer 1

纯 JavaScript:

<script type="text/javascript">
var SUBMIT_BUTTON_ID = "Button1";
window.onload = function(event) {
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oCurInput = arrInputs[i];
        if (oCurInput.type == "text") {
            oCurInput.onkeypress = function(evt) {
                if (typeof evt == "undefined" || evt == null)
                    evt = window.event;
                var keyCode = evt.keyCode || evt.which;
                if (keyCode == 13) {
                    document.getElementById(SUBMIT_BUTTON_ID).click();
                    return false;
                }
                return true;
            }
        }
    }
}
</script>

已在 IE8 和 Chrome 上测试，最好在您认为相关的所有浏览器上测试后再使用。

此代码将处理文档中所有文本框的所有 onkeypress 事件，当按下 ENTER 键时，它将模仿提交按钮的点击并取消对该事件的进一步处理以避免冲突。