[英]Javascript onchange event preventing onsubmit event in HTML form?
考慮一下HTML表單：
<form action="" method="POST" onsubmit="return checkValidArray()">
<input type="text" name="data" onchange="return validate(this);">
</form>
（在IE 6和Firefox 3中），當您在輸入字段中鍵入一些文本並單擊提交時，onchange事件將為輸入字段觸發，但是在您單擊提交按鈕之前不會為表單觸發onsubmit事件第二次（當然，onchange不會觸發）。 換句話說，onchange似乎阻止了onsubmit的解雇。
當用戶退出字段時，希望檢查表單中的每個字段，以便為他們提供即時的驗證反饋，並且如果存在無效數據則還防止提交表單。
[編輯：請注意，兩個驗證功能都包含警報（）。]
如何解決這個問題？
解決方案（一種）：
事實證明，在輸入的onchange事件期間只存在alert（）或confirm（） - 導致表單的onsubmit事件不會觸發。 JS線程似乎被alert（）阻止了。
解決方法是在輸入的onchange調用中不包含任何alert（）或confirm（）。
已知受影響的瀏覽器：
IE6 - Windows
IE8 - 贏
FF3 - 贏
已知不受影響的瀏覽器：
谷歌Chrome - 贏
Safari - Mac
FF - Mac
我使用以下代碼嘗試使用Firefox 3（Mac）：
<html>
<head>
<script>
function validate(ele)
{
alert("vali");
return false;
}
function checkValidArray()
{
alert("checkValidArray");
}
</script>
</head>
<body>
<form action="" method="POST" onsubmit="return checkValidArray()">
<input type="text" name="data" onchange="return validate(this);">
<input type="submit" value="Ok">
</form>
</body>
</html>
它似乎工作。 當我點擊Ok按鈕時，彈出“Vali”和“Check Valid Array”。 最初我認為return false可能是表單未提交的原因，但它已提交（至少調用了checkValidArray() ）。
現在，您在checkValidArray()和validate()方法中做了什么？ 有什么特別的嗎？ 你可以發布代碼嗎？
編輯：我在Windows上測試了IE8和FF3，這里兩個事件都沒有被解雇。 我不知道為什么。 也許onblur是一個解決方案，但為什么onchange不起作用？ 是否有特定原因或僅僅是另一個不一致？ （適用於Mac上的FF和Safari）
您可以在輸入中使用onblur事件而不是onchange。
不要創造; 提交按鈕。 相反，創建一個普通按鈕並編寫一個函數，可以使用該按鈕調用onClick。
函數將在表單字段上進行驗證，如果一切正常，它將提交表單。 否則它不會。
function validate
{
"Piece of code to Validate your form"
document.formName.action.value = "URL which you want to call"
document.propFile.submit(); // It will submit he page
}
非常有趣的是，Mac上的行為是不同的，因此它看起來依賴於平台而不依賴於瀏覽器。 某處必須有線索......
我嘗試使用Nivas的代碼onblur，但與onchange（只有“Vali”警報）的結果相同。
有什么區別在於你是否在validate（）中做了什么 。 注釋掉線路警報（“vali”）; 它的工作原理！ （來自validate（）的實際返回值無關緊要，雖然我不指望它。）
編輯：一位同事剛剛在Windows上的谷歌瀏覽器中嘗試過此功能，並且可以在那里運行。 由於Chrome分離JS線程的方式，這直觀有意義。
關於第一個alert（）阻塞線程的事情會導致onsubmit事件丟失。 可能的競爭條件？
未在表單上調用html / javascript onsubmit事件提交以驗證表單
[英]html/javascript onsubmit event not called on form submit to validate form
Javascript onsubmit事件不會更新html表單操作屬性
[英]Javascript onsubmit event won't update html form action property
HTML / Javascript addEventListener Onchange事件在Onchange中？
[英]HTML/Javascript addEventListener Onchange event Within an Onchange?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.