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时，而不是使用鼠标单击提交按钮，图像输入被激活（在这种情况下对应于取消事件，与“继续”完全相反“对于有问题的用户界面而言，这是很自然的行动。”

我想要做的是，在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

Pure 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键时，它将模仿单击提交按钮并取消对事件的进一步处理以避免冲突。

如何在WebKit中输入时不提交INPUT TYPE =“IMAGE”？

1 个答案: