2011-04-12 95 views
18

我一直試圖禁用輸入我的表單上的密鑰。我擁有的代碼如下所示。由於某種原因,回車鍵仍然觸發提交。代碼在我的頭部分,似乎從其他來源是正確的。禁用輸入密鑰的形式

disableEnterKey: function disableEnterKey(e){ 
     var key;  
     if(window.event) 
      key = window.event.keyCode; //IE 
     else 
      key = e.which; //firefox  

     return (key != 13); 
    }, 
+0

您是否將此附加到表單,提交按鈕或窗口? – 2011-04-12 02:42:15

+0

所以你給我們的代碼,你知道的作品...並問爲什麼不是?附: [這個小提琴](http://jsfiddle.net/Khez/E9L57/)證明它是有效的,所以嘗試給你的問題提供更多的數據。函數是否運行? – Khez 2011-04-12 02:46:46

+0

你好嗎? – 2011-04-12 02:48:54

回答

37

如果您使用jQuery,它的smiple。在這裏你去

$(document).keypress(
    function(event){ 
    if (event.which == '13') { 
     event.preventDefault(); 
     } 


}); 
+2

這很有效,但是如果你需要在特定區域禁用它,碼?例如:您想禁用表單中的輸入,但要在頂部導航欄中的搜索器中可用。 – ManelPNavarro 2014-02-20 16:08:06

+0

選擇器可以是任何你想要的東西。 $(document)是選擇器。您可以使用$(「#IDofYourElement」)來選擇id =「IDofYourElement」的任何元素。瞭解JQuery選擇器,以便輕鬆查看正在發生的事情。否則,您將繼續詢問這類問題以及「如何選擇div標籤?如何選擇一個部分?」。學習規則並應用它是這裏的關鍵。 – 2016-06-01 20:34:54

+0

這個效果很好,在一個帶有多個(asp.net)按鈕的.net頁面上,輸入某種方式會觸發錯誤的功能,現在可以穩定頁面,謝謝! – visual 2017-08-04 01:48:54

16

試試這個^^

$(document).ready(function() { 
     $("form").bind("keypress", function(e) { 
      if (e.keyCode == 13) { 
       return false; 
      } 
     }); 
    }); 

希望這有助於

+2

這是比選定的更好的解決方案,因爲它只會選擇選定的表單。我會建議,在表單中添加一個ID或類並選擇它。我可以看到另一位開發人員出現,發展他們自己的形式,並且感到沮喪,他們的表單在您輸入時不起作用。 '$(「#id-of-form」)''或者甚至更好'$(「form.form - disable-enter-key」)' – StingeyB 2015-07-16 20:19:46

1

你可以嘗試這樣的事情,如果你使用jQuery。

$("form").bind("keydown", function(e) { 
    if (e.keyCode === 13) return false; 
}); 

這將等待的keydown,如果是輸入,它不會做任何事情。

1

就在<Head>標籤在HTML代碼中添加以下代碼。它將在輸入鍵上提交表單提交表單上的所有字段。

<script type="text/javascript"> 
    function stopEnterKey(evt) { 
     var evt = (evt) ? evt : ((event) ? event : null); 
     var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
     if ((evt.keyCode == 13) && (node.type == "text")) { return false; } 
    } 
    document.onkeypress = stopEnterKey; 
</script> 
0

我檢查了所有上述解決方案,他們不工作。唯一可能的解決方案是爲表單的每個輸入捕獲「onkeydown」事件。 您需要disableAllInputs附加到頁面的onload事件或通過jQuery的準備()

/* 
* Prevents default behavior of pushing enter button. This method doesn't work, 
* if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of 
* the input. So method should be attached directly to the input 'onkeydown' 
*/ 
function preventEnterKey(e) { 
    // W3C (Chrome|FF) || IE 
    e = e || window.event; 
    var keycode = e.which || e.keyCode; 
    if (keycode == 13) { // Key code of enter button 
     // Cancel default action 
     if (e.preventDefault) { // W3C 
      e.preventDefault(); 
     } else { // IE 
      e.returnValue = false; 
     } 
     // Cancel visible action 
     if (e.stopPropagation) { // W3C 
      e.stopPropagation(); 
     } else { // IE 
      e.cancelBubble = true; 
     } 
     // We don't need anything else 
     return false; 
    } 
} 
/* Disable enter key for all inputs of the document */ 
function disableAllInputs() { 
    try { 
     var els = document.getElementsByTagName('input'); 
     if (els) { 
      for (var i = 0; i < els.length; i++) { 
       els[i].onkeydown = preventEnterKey; 
      } 
     } 
    } catch (e) { 
    } 
} 
3

這裏有一個簡單的方法使用jQuery它限制到合適的輸入元素來實現:

//prevent submission of forms when pressing Enter key in a text input 
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) { 
    if (e.which == 13) e.preventDefault(); 
}); 

謝謝對此回答:https://stackoverflow.com/a/1977126/560114

12

大多數答案都在jQuery中。您可以在純Javascript中完成此操作,簡單且無需庫。這裏是:

<script type="text/javascript"> 
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true); 
</script> 

這段代碼很好用,因爲它只對input type ='text'禁用「Enter」按鍵動作。這意味着訪問者仍然可以在textarea和整個網頁中使用「Enter」鍵。他們仍然可以通過使用「Tab」鍵轉到「Submit」按鈕並點擊「Enter」來提交表格。

這裏有一些亮點:

  1. 它以純JavaScript(不需要庫)。
  2. 不僅它檢查按鍵,它確認是否在輸入類型='text'表單元素上點擊了「Enter」。 (這將導致最錯誤的表單提交
  3. 連同上面,用戶可以使用「Enter」鍵其他地方。
  4. 它是短暫的,乾淨,快速,單刀直入。

如果您想要爲其他操作禁用「Enter」,則可以添加控制檯。日誌(E);爲了您的測試目的,並在Chrome中點擊F12,進入「控制檯」選項卡並點擊頁面上的「backspace」並查看其中的內容以查看返回的值,然後您可以定位所有這些參數以進一步增強代碼上述以適合你的「e.target.nodeName」 需求「e.target.type」還有更多...

+3

其實它應該是'e.target.nodeName ==='INPUT'&& e.target.type!=='textarea''。使用指定的代碼,如果收音機或複選框被關注,它將允許提交表單。 – 2016-05-18 13:50:26

0

對於非JavaScript的解決方案,可以嘗試在一個<button disabled>Submit</button>放入您的表格,位於任何其他提交按鈕/輸入之前。我建議<form>開始標記後(使用CSS來隱藏它,ACCESSKEY =「 - 1」把它弄出來的標籤序列等)

AFAICT,user agents look for the first submit buttonENTER被擊中的輸入,如果該按鈕被禁用,則將停止尋找另一個按鈕。

表單元素的默認按鈕是樹形次序中的第一個提交按鈕,其表單所有者是該表單元素。

如果用戶代理支持讓用戶隱式提交表單(例如,某些平臺在文本字段集中隱式提交表單時觸擊「輸入」鍵),那麼對於默認按鈕具有已定義的激活行爲必須導致用戶代理在該默認按鈕上運行合成點擊激活步驟。

因此,如果默認按鈕被禁用,當使用這種隱式提交機制時,不會提交表單。 (時,禁用按鈕沒有激活行爲。)

https://www.w3.org/TR/html5/forms.html#implicit-submission

不過,我知道,Safari 10 MacOS行爲不端這裏,提交即使默認按鈕被禁用的形式。

所以,如果你能承擔的JavaScript,插入<buttononclick="return false;">Submit</button>代替。在ENTER,onclick處理程序將被調用,並且因爲它返回false,所以提交過程停止。我測試過的瀏覽器甚至不會執行瀏覽器驗證的事情(聚焦第一個無效窗體控件,顯示錯誤消息等)。