防止在按鍵過程中提交表單

這裏我有一個帶有文本區域的表單。我有一個鍵盤事件附加到文本區域。雖然用一個手指給文本區域輸入我按下了鍵和另一隻手點擊提交按鈕。因此，場景是在向文本區域提供輸入的同時提交表單。如何防止發生這種情況？防止在按鍵過程中提交表單

<html> 
<body> 
<form action='sample.php' method='post'> 
<input type='text' id='mytext' value=''> 
<input type='submit' value='submit'> 
</form> 
<script> 
document.getElementById('mytext').addEventListener('keyup',function(){ 
    console.log("keyup"); 
}) 
</script> 
</body> 
</html>

來源

2016-11-03 AL-zami

使用驗證和/或'onsubmit'處理程序。 –

試過......驗證用於檢查數字輸入......我可以按住任意數字鍵並提交表單 –

我不知道爲什麼？ 'keyup'事件不會觸發表單提交。那麼爲什麼和你要求阻止呢？ [看到小提琴]（https://fiddle.jshell.net/d558wrte/） – prasanth

將true賦值給keydown事件中的變量。

在keyup事件中爲它分配false。

在提交事件中測試它的值，如果它是true，則調用preventDefault。

來源

2016-11-03 11:20:40 Quentin

可以請詳細說明：\ ..所以我需要一個全局變量...可以創建問題...我試圖避免全局變量 –

你不瞭解什麼？你的代碼表明你知道如何分配事件處理程序。爲變量賦值並不困難。有什麼問題？ – Quentin

您可以使用閉包/ IIFE來避免使用全局。 http://stackoverflow.com/a/1841941/19068 – Quentin

這將不允許在最後一次按鍵之後提交3秒。在您的keyup事件中，您將canSubmit設置爲false，然後設置等待3000毫秒的setTimeout超時，然後將該值設回true。

然後，您將另一個事件偵聽器添加到窗體，該窗體將檢查canSubmit是否爲false，並調用event.preventDefault()，它會在那裏結束事件。

<html> 
    <body> 
    <form action='sample.php' method='post' id="myForm"> 
    <input type='text' id='mytext' value=''> 
    <input type='submit' value='submit'> 
    </form> 
    <script> 
    var canSubmit = true; 
    document.getElementById('mytext').addEventListener('keyup',function(){ 
     canSubmit = false; 
     setTimeout(function() { 
      canSubmit = true; 
     }, 3000); 
    }); 
    document.getElementById('myForm').addEventListener('submit', function(e) { 
     if (!canSubmit) { 
      return e.preventDefault(); 
     } 
    }) 
    </script> 
    </body> 
</html>

來源

2016-11-03 11:22:49 ItsGreg

防止在按鍵過程中提交表單

回答

相關問題