如何在WebKit中輸入INPUT TYPE =「IMAGE」不提交？

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鍵而不是使用鼠標點擊提交按鈕時，圖像輸入被激活（在這種情況下，對應於取消事件，與「正好相反」 「針對相關用戶界面的行爲是很自然的）。

我想要做的是，在回車按鍵，激活<input type="submit">按鈕而不是的<input type="image">，無需通過點擊圖片破提交。我怎樣才能做到這一點？最好以跨瀏覽器的方式，所以我不需要在代碼中更多的特殊情況。

請不要使用jQuery解決方案，因爲這個應用程序沒有使用它（並且爲這樣一個「簡單」事物引入一個全新的庫將變得非常困難） - 股票JavaScript是非常好的。顯然最好的辦法是如果只能用HTML和CSS來完成，但是我對此的可行性有懷疑。

實質上，這個問題在我看來似乎與HTML: Submitting a form by pressing enter without a submit button完全相反。

不幸的是，由於用戶界面的不同部分由不同的類呈現，並保存在單獨的.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鍵時，它將模仿單擊提交按鈕並取消對事件的進一步處理以避免衝突。