javascript表单不会通过addEventListener捕获的转义键提交（）
[英]javascript form won't submit() from escape key captured with addEventListener
问题描述
UPDATE - I added the following link to the html form. 
更新 -我将以下链接添加到html表单。 When clicked, form.submit() works as it should. 单击时，form.submit（）可以正常工作。
<a href="#" onClick="post_to_url('abc');">click</a>
form.submit() only doesn't work when capturing a keypress. form.submit（）仅在捕获按键时不起作用。
Update 2 - I changed event.keyCode == 27 to event.keyCode == 65 and voila, with the press of the 'A' key, the submit() will work. 更新2-我将event.keyCode == 27更改为event.keyCode == 65，瞧，按“ A”键，submit（）将起作用。 So the problem is with some interference with the escape key. 因此，问题在于对转义键有一些干扰。 Any ideas? 有任何想法吗？
UPDATE 3 - solved - THE SOLUTION is to change keydown to keyup in the code below 更新3-解决 -解决方案是在以下代码中将keydown更改为keyup
End Update 结束更新
My goal is to capture a user escape keypress and go to a new url. 我的目标是捕获用户的转义按键并进入新的URL。 I have successfully captured the escape key and called the function which creates a form on the fly to submit with the passed url. 我已经成功捕获了转义键，并调用了该函数，该函数可快速创建一个表单以与传递的URL一起提交。 I have verified the url has been passed correctly with an alert(), but the form won't submit. 我已经验证了URL是否已使用alert（）正确传递，但表单无法提交。 I can't figure out what isn't working. 我不知道什么是行不通的。 Thanks in advance. 提前致谢。
The key handler which captures the escape key is here (NOTE: THE SOLUTION is to change keydown to keyup in the code below- I left it alone for the integrity of the post) : 捕获转义密钥的密钥处理程序在此处（注意：解决方案是在下面的代码中将keydown更改为keyup，为了确保发布的完整性，我将其保留下来）：
<script type="text/javascript">
window.addEventListener("keydown", function(event) {
// Bind to both command (for Mac) and control (for Win/Linux)
if (event.keyCode == 27) {
if (document.getElementById('url')){
path = document.getElementById('url').value;
post_to_url(path);
}
}
}, false);
</script>
The function to create the form to post is here: 创建要发布的表单的功能在这里：
<script type="text/javascript">
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
</script>
I'm including the HTML code to make this example complete: 我包含HTML代码以使此示例完整：
<body>
<form id = 'close' action='' method="POST">
<input id="url" type="text" value="urlHere">
<input type="submit" name="OK">
<!--when clicking on this - form.submit() works as it should -->
<a href="#" onClick="post_to_url('abc');">click</a>
</form>
</body>
2 个解决方案
解决方案1
0 2013-08-16 01:57:22
First make sure you are passing the params argument when you call post_to_url . 首先，请确保在调用post_to_url时传递了params参数。 This doesnt seem to happen inside your keydown event handler 您的keydown事件处理程序内部似乎没有发生这种情况
Second check that the value of document.getElementById('url').value points to a script that you want your data submitted to. 其次，检查document.getElementById('url').value指向要向其提交数据的脚本。
Third, make sure the params argument is a js Object with members/keys. 第三，确保params参数是带有成员/键的js对象。
NB You do not need to add the form to the document in order to submit. 注意：您不需要将表单添加到文档中即可提交。
EDIT After going thru the above checklist, you should have the following code that works..... 编辑通过上面的清单后，您应该拥有下面的代码可以工作.....
var prm = {"ABC":"123"}//object to be submitted
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params)
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
form.submit();
}
window.addEventListener("keydown", function(event) {
// Bind to both command (for Mac) and control (for Win/Linux)
if (event.keyCode == 27) {
post_to_url("index.php",prm);//swap index.php with your url, for prm, see above
}
}, false);
解决方案2
0 已采纳 2013-08-16 06:34:04
Finally, I changed "keydown" to "keyup". 最后，我将“ keydown”更改为“ keyup”。 So simple - took me hours. 如此简单-花了我几个小时。 The final listener code follows. 最终的侦听器代码如下。 For my needs, I didn't pass any parameters to post_to_url() except the url path. 出于我的需要，除了url路径之外，我没有将任何参数传递给post_to_url（）。 You will likely want to pass parameters. 您可能希望传递参数。 You can see Moje's example above. 您可以在上面看到Moje的示例。
<script type="text/javascript">
window.addEventListener("keydown", function(event) {
// Bind to both command (for Mac) and control (for Win/Linux)
if (event.keyCode == 27) {
if (document.getElementById('url')){
path = document.getElementById('url').value;
post_to_url(path);
}
}
}, false);
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.