使用Javascript來更改哪些提交被激活輸入密鑰按

我有一個HTML頁面上的多個提交按鈕，執行不同的操作的窗體。但是，當用戶在文本輸入中鍵入一個值並點擊輸入時，瀏覽器通常會像下一個提交按鈕一樣被激活。我希望發生特定的動作，所以一個解決方案，我發現是把無形的提交按鈕到HTML討論的文字輸入後直接，就像這樣：使用Javascript來更改哪些提交被激活輸入密鑰按

<input type="text" name="something" value="blah"/> 
<input type=submit name="desired" value="Save Earth" style="display: none"/> 
... 
<input type=submit name="something_else" value="Destroy Earth" /> 
... 
<input id="foobar" type=submit name="desired" value="Save Earth" />

這就像一個魅力在大多數瀏覽器，除了它不適用於Safari和Chrome等Webkit瀏覽器。出於某種原因，他們跳過不可見的提交按鈕。我一直在試圖弄清楚如何攔截輸入按鍵並使用Javascript激活正確的提交，但是我一直無法使其正常工作。攔截keydown並將焦點設置爲正確提交不起作用。

有沒有什麼方法可以使用Javascript或其他方式來選擇當用戶在HTML表單的文本輸入中點擊回車鍵時使用哪個提交按鈕？

編輯：爲了澄清，表單不能要求Javascript從根本上「工作」。我不關心在webkit瀏覽器上如果沒有Javascript，enter鍵提交是不可取的，但我不能刪除或更改提交按鈕的順序。

~~這是我試過的，它不會改變webkit瀏覽器中的提交行爲。~~
工作原理是將以下代碼中的焦點（）更改爲click（）。

document.onkeypress = processKey; 

function processKey(e) 
{ 
    if (null == e) 
     e = window.event ; 
    if (e.keyCode == 13) { 
     document.getElementById("foobar").click(); // previously: focus() 
    } 
}

編輯：最終的解決方案：

作品與每一個瀏覽器，只攔截在需要時enter鍵：

HTML：

<input type="text" name="something" value="blah" 
    onkeydown="return processKey(event)" /> 
<input type=submit name="desired" value="Save Earth" style="display: none"/> 
... 
<input type=submit name="something_else" value="Destroy Earth" /> 
... 
<input id="foobar" type=submit name="desired" value="Save Earth" />

的Javascript：

function processKey(e) 
{ 
    if (null == e) 
     e = window.event ; 
    if (e.keyCode == 13) { 
     document.getElementById("foobar").click(); 
     return false; 
    } 
}

來源

2008-12-19 postfuturist

可以嘗試下面我舉的例子。使用e.which而不是e.keycode – Tester101 2008-12-19 21:22:37

一種方法是刪除所有提交按鈕並使用輸入按鈕以編程方式提交表單。這將刪除通過在文本框中按Enter鍵提交表單的功能。您也可以將一個提交按鈕作爲默認的提交功能，併爲其他用戶定期使用按鈕輸入，並以編程方式提交表單。

這個明顯的短暫下降是用戶需要啓用JavaScript。如果這不是問題，這是你的考慮。

編輯：

在這裏，我試圖做出了榜樣您使用jQuery（相同的功能，使用方便，無需jQuery的創建）爲...讓我知道，如果這有助於...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"><!-- 
    $(document).ready(function(){ 
     $("#f input").filter(":text").keydown(function(event) { 
      if (event.keyCode==13) { 
       $(this).nextAll().eq(0).click(); 
      } 
     }); 
    }); 
    //--></script> 
</head> 
<body> 
    <form name="f" id="f"> 
     <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br /> 
     <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br /> 
     <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br /> 
    </form> 
</body> 
</html>

來源

2008-12-19 20:56:47 cLFlaVA

@ steveth45查看我的示例...輸入按鈕可以很容易地更改爲提交按鈕。 – cLFlaVA 2008-12-19 21:24:53

啊哈！點擊（）是答案！ – postfuturist 2008-12-19 21:25:57

@ steveth45 - 爲了完整性，請確保您在所有（大多數）常見瀏覽器中處理事件。一些對待事件對象的方式不同。 http://www.quirksmode.org/dom/events/index.html – cLFlaVA 2008-12-19 21:32:48

只要控制按鍵事件。把onkeypress事件在body標籤


onkeypress=CheckKeyPress()

然後處理進入關鍵


function CheckKeyPress(){ 
    var code; 
    if(!e) var e = window.event; 
    if(e.keyCode){ 
     code = e.keyCode; 
    }else if(e.which){ 
     code = e.which; 
    } 
    if(code == 13){ 
     //Do Something 
    } 
}

來源

2008-12-19 21:19:45 Tester101

你忘了在功能的標題中加上「e」... – some 2008-12-20 00:05:39

不要攔截事件，攔截submit事件。

這樣：

form.onsubmit = function(e){ 
    // Do stuff. Change the form's action or method maybe. 
    return true; 
}

來源

2008-12-19 21:25:43 Triptych

有關使用單獨的形式是什麼？也許我錯過了一些讓這個不可能的東西：P

來源

2008-12-19 21:49:09 finpingvin

隱形默認提交操作是一種合理的方法，不會將JavaScript拖入等式中。然而，帶有'display：none'的表單元素通常並不可靠。我傾向於在頁面上的其他位置使用絕對定位的提交按鈕，位於頁面左側。它仍然非常難看，但完成了工作。

來源

2008-12-20 14:21:36 bobince

如何使用CSS？您可以使用「position：absolute; left：-200px; top：-200px;」設置第一個按鈕，即屏幕可見區域外的默認按鈕。據我記憶，它不會被任何瀏覽器忽略，因爲它是不可見的。這只是正常：

<form method="get"> 
<input type="text" name="something" value="blah"/> 
<input type=submit name="desired" value="Save Earth" 
     style="position: absolute; left: -200px; top: -200px;"/> 
... 
<input type=submit name="something_else" value="Destroy Earth" /> 
... 
<input id="foobar" type=submit name="desired" value="Save Earth" /> 
</form>

而地球會保存...

來源

2010-01-01 12:42:04 coretys

使用Javascript來更改哪些提交被激活輸入密鑰按

回答

相關問題