堆棧內存溢出
  簡體   English   中英

禁用表單的輸入鍵

[英]Disabling enter key for form

 原文  2011-04-12 02:39:12  9   16    javascript/ html/ window

問題描述

我一直在嘗試禁用表單上的Enter鍵。 我的代碼如下所示。 由於某種原因，回車鍵仍在觸發提交。 該代碼在我的 head 部分，從其他來源看來是正確的。

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

        return (key != 13);
    },

16 個解決方案

解決方案1
 113 已采納  2011-04-12 02:54:28

如果你使用jQuery，它很簡單。 干得好

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

解決方案2
 50  2016-05-15 18:16:52

大多數答案都在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>

此代碼效果很好，因為它僅禁用輸入 type='text' 的“Enter”按鍵操作。 這意味着訪問者仍然可以在 textarea 和整個網頁中使用“Enter”鍵。 他們仍然可以通過使用“Tab”鍵轉到“提交”按鈕並按“Enter”來提交表單。

以下是一些亮點：

  1. 它是純 javascript（不需要庫）。
  2. 它不僅會檢查按下的鍵，還會確認是否在 input type='text' 表單元素上點擊了“Enter”。 （這導致最錯誤的表單提交
  3. 與上述一起，用戶可以在其他任何地方使用“Enter”鍵。
  4. 它簡短、干凈、快速且直截了當。

如果您還想為其他操作禁用“Enter”，您可以添加 console.log(e); 為了您的測試目的，並在 chrome 中點擊 F12，轉到“控制台”選項卡並點擊頁面上的“退格”並查看其內部以查看返回的值，然后您可以定位所有這些參數以進一步增強代碼以上以滿足您對"e.target.nodeName" 、 "e.target.type"等的需求...

解決方案3
 36  2018-08-27 13:45:13

在你的表單標簽中粘貼這個：

onkeypress="return event.keyCode != 13;"

例子

<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">

如果您想在鍵入和忽略 ENTER 時進行搜索，這會很有用。

/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)

解決方案4
 25  2011-04-12 02:43:04

試試這個^^

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

希望這可以幫助

解決方案5
 8  2017-03-15 10:11:51

對於非 javascript 解決方案，嘗試將<button disabled>Submit</button>放入您的表單中，放置在任何其他提交按鈕/輸入之前。 我建議在<form>開始標記之后立即（並使用 CSS 隱藏它，accesskey='-1' 將其從選項卡序列中取出，等等）

AFAICT，當在輸入中按下ENTER時，用戶代理會查找第一個提交按鈕，如果該按鈕被禁用，則將停止尋找另一個。

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

如果用戶代理支持讓用戶隱式提交表單（例如，在某些平台上，在文本字段聚焦時點擊“輸入”鍵隱式提交表單），則為默認按鈕具有定義激活的表單執行此操作行為必須導致用戶代理在該默認按鈕上運行合成點擊激活步驟。

因此，如果禁用默認按鈕，則在使用這種隱式提交機制時不會提交表單。 （按鈕在禁用時沒有激活行為。）

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

但是，我知道Safari 10 MacOS在這里行為不端，即使默認按鈕被禁用也提交表單。

因此，如果您可以假設 javascript，請插入<button onclick="return false;" >Submit</button>代替。 在ENTER 上， onclick 處理程序將被調用，並且由於它返回 false 提交過程停止。 我測試過的瀏覽器甚至不會做瀏覽器驗證的事情（聚焦第一個無效的表單控件，顯示錯誤消息等）。

解決方案6
 7  2020-02-07 03:32:43

這是純javascript 

 document.addEventListener('keypress', function (e) { if (e.keyCode === 13 || e.which === 13) { e.preventDefault(); return false; } });

解決方案7
 5  2016-03-30 15:58:54

這是使用 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 。

解決方案8
 5  2019-03-16 07:25:16

解決方法很簡單：

用按鈕替換“提交”類型

<input type="button" value="Submit" onclick="this.form.submit()" />

解決方案9
 3  2013-05-27 12:01:19

只需在 HTML 代碼的<Head>標簽中添加以下代碼即可。 它將按 Enter Key 提交表單，用於表單上的所有字段。

<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>

解決方案10
 1  2014-01-04 15:32:21

我檢查了上述所有解決方案，它們不起作用。 唯一可能的解決方案是為表單的每個輸入捕獲 'onkeydown' 事件。 您需要將 disableAllInputs 附加到頁面的加載或通過 jquery ready()

/*
 * 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) {
    }
}

解決方案11
 1  2011-04-12 02:44:06

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

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

那將等待一個 keydown，如果它是Enter ，它什么都不做。

解決方案12
 0  2021-05-21 15:17:38

我認為將類設置為表單要好得多。 所以我編碼：

HTML

<form class="submit-disabled">

JS

/**
 * <Start>
 * Submit Disabled Form
 */
document
    .querySelector('.submit-disabled')
    .addEventListener('submit', function (e) {

        e.preventDefault()
    });
/**
 * </End>
 * Submit Disabled Form
 */

此外，如果您只想在按下Enter Key時禁用提交：

/**
 * <Start>
 * Submit Disabled Form
 */
document
    .querySelector('.submit-disabled')
    .addEventListener('keypress', function (e) {
        if (e.keyCode === 13) {
            e.preventDefault()
        }
    });
/**
 * </End>
 * Submit Disabled Form
 */

解決方案13
 0  2022-01-04 11:12:17

在 HTML 文件中：

@keypress="disableEnterKey($event)"

在js文件中：

disableEnterKey(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
}

解決方案14
 0  2022-03-09 02:00:59

首先，您需要在提交時禁用表單，但在單擊按鈕時重新啟用它。 在這種情況下不使用which或keycode ，避免了一些兼容性問題。

    let formExample = document.getElementbyId("formExample");//selects the form
    formExample.addEventListener("submit", function(event){ //must be used "submit"
       event.preventDefault();// prevents "form" from being sent
    })

要通過單擊按鈕重新激活並提交表單：

    let exampleButton = document.getElementById("exampleButton");
    exampleButton.addEventListener("click", activateButton); //calls the function "activateButton()" on click 
    function activateButton(){
       formExample.submit(); //submits the form
    }

這個的一個變體是

    let exampleButton = document.getElementById("exampleButton");
    exampleButton.addEventListener("click", activateBtnConditions); //calls the function "activateBtnConditions()" on click
    function activateBtnConditions(){
       if(condition){
          instruction
       }
       else{
          formExample.submit()
       }
    }

解決方案15
 0  2022-11-30 14:48:24

這是一個現代的、簡單的反應式解決方案，適用於：

  1. React、Solidjs、JSX 等。
  2. 寫在Typescript
  3. 支持服務端渲染（SSR）
  4. 所有現代瀏覽器
  5. 不需要 jQuery
  6. 阻止<textarea>之外的所有Enter鍵，您希望允許Enter
// avoids accidential form submission, add via event listener
function blockEnterKey(e: KeyboardEvent) {
  if (e.key == "Enter" && !(e.target instanceof HTMLTextAreaElement)) {
    e.preventDefault()
  }
}

// add the event listener before the rendering return in React, etc.
if (typeof window !== undefined) {
  window.addEventListener("keydown", blockEnterKey)
  // the following line is for Solidjs. React has similar cleanup functionality
  // onCleanup(() => document.body.removeEventListener("keydown", blockEnterKey))
}

return(
  <form>
  ...
  </form>
)

解決方案16
 -1  2018-07-22 12:41:12

我在這里找到的更好的方法：

Dream.In.Code

action="javascript: void(0)"或action="return false;" （對我不起作用）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 禁用表單中選定提交按鈕的回車鍵 JS / AJAX自動提交表單：禁用Enter鍵以防止頁面刷新 在輸入鍵時，提交表單 禁用默認按鈕或在asp.net中輸入密鑰c＃ 用html形式輸入鍵鈎 輸入密鑰以提交Ajax表單 按回車鍵提交表格？ 表單正在監聽輸入鍵 Vue 使用 javascript 在 Enter 鍵上提交表單 輸入密鑰以立即提交表單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM