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 - 模拟形式 “的形式属性” 文本输入

回答

相关问题