JS - 模擬形式「的形式屬性」文本輸入

考慮我有以下的HTML提交：JS - 模擬形式「的形式屬性」文本輸入

<form id="myForm" action="/echo/html/" method="post"> 
    <input type="text" value="10" /> 
    <input type="submit" value="submit" /> 
</form> 
<input type="submit" form="myForm" value="submit" /> 
<input id="myInput" type="text" form="myForm" />

，並與HTML我有以下JS：

document.addEventListener('submit', function(e) { 
    console.log(e, 'addEventListener'); 
}); 

document.getElementById('myInput').addEventListener('keyup', function(e) { 
    console.log(e.target.form); 
    e.target.form.submit(); 
});

（注：此代碼已被優化爲在jsfiddle中工作，因此使用/echo/html/。關於此的文檔是here）

有三個部分，以上面的代碼：

的<form>（id="myForm"），其具有text input和submit input。
submit input外myForm，但使用屬性form="myForm"將提交myForm內的數據。
text input當註冊一個keyup時，將通過使用e.target.form.submit()激發myForm。 但是，這不會觸發附加到文檔的submit事件。

我的問題是：

如何模擬/觸發器/等。一個submit事件，它實際上使用我上面描述的第三種方法（在keyup上爲text input）發射了當前正被document收聽的submit事件。

P.S.我無法得到一個片段，因爲它在計算器中出錯，所以jsfiddle is here。

來源

2016-09-22 4lackof

我認爲這是因爲你觸發了form上的事件，沒有冒泡到document。我很遺憾地無法找到有關它的文檔的任何鏈接（如爲什麼發生）。如果有人能夠提供這樣的鏈接，我也有興趣閱讀它。

要解決這個問題，我創建了一個submitEvent實際上氣泡，由document捕獲以及：

document.addEventListener('submit', function(e) { 
    console.log(e, 'documentEventListener'); 
}); 

document.getElementById('myForm').addEventListener('submit', function(e){ 
    console.log(e, 'myFormEventListener'); 
}) 

document.getElementById('myInput').addEventListener('keyup', function(e) { 
    var event = new Event("submit", { bubbles: true }); 
    this.form.dispatchEvent(event); 
});

https://jsfiddle.net/c1vnjjxr/3/

來源

2016-09-22 07:25:13 eithed

有趣！以及這工作，並做我需要它做的事情。奇怪的'.submit（）'（也許）沒有正確冒泡到'document'。 – 4lackof

我認爲這裏的解釋是，編程式觸發的事件不會冒泡（與鼠標事件不同），但我未能找到相關參考。 – eithed

有道理。如果'.submit（）'帶了一個'bubble'參數，就像'new Event'一樣，這將很酷。我猜這樣的：'this.form.submit（{bubbles：true}）;'但你的方式工作（只是意識到你甚至可以像這樣行：'this.form.dispatchEvent（new Event（「submit 「，{bubbles：true}））;' – 4lackof

問題是「myInput」輸入字段已超出表單標記。使用外部輸入提交表單是獲取表單並使用.submit（）方法。

document.addEventListener('submit', function(e) { 
    console.log(e, 'addEventListener'); 
}); 

document.getElementById('myInput').addEventListener('keyup', function(e) { 
    // console.log(e.target.form); <-- what is this for?? 
    document.getElementById("myForm").submit(); 
});

來源

2016-09-22 06:40:32

HTML5允許你放置輸入元素的形式外，他們屬於 - 這是'form'屬性的用途。您可以通過訪問'.form'屬性來訪問表單 - 因此，無論是'e.target.form'（'e.target'是keyup事件的目標，在這種情況下'＃myInput'）或'this.form'是好的 – eithed

爲什麼你需要這個？

document.addEventListener('submit', function(e) { 
    console.log(e, 'addEventListener'); 
});

只需將輸入內容放入表單中，以便他們能夠提交它。

來源

2016-09-22 06:59:16 bestafubana

我的想法是在'text input'（' 4lackof

JS - 模擬形式 「的形式屬性」 文本輸入

回答

相關問題

JS - 模擬形式「的形式屬性」文本輸入