Fatal编程技术网
  • javascript/
  • javascript表单赢得'；t submit（）来自addEventListener捕获的转义键

javascript表单赢得'；t submit（）来自addEventListener捕获的转义键

javascript forms

javascript表单赢得'；t submit（）来自addEventListener捕获的转义键,javascript,forms,submit,Javascript,Forms,Submit,更新-我在html表单中添加了以下链接。单击时，form.submit（）会正常工作 <a href="#" onClick="post_to_url('abc');">click</a> form.submit（）仅在捕获按键时不起作用 更新2-我将event.keyCode==27更改为event.keyCode==65，瞧，按下“A”键，submit（）将工作。因此，问题在于对退出键的干扰。有什么想法吗 更新3-已解决-解决方案是在下面的代码中将keydown

更新-我在html表单中添加了以下链接。单击时，form.submit（）会正常工作

<a href="#" onClick="post_to_url('abc');">click</a>
form.submit（）仅在捕获按键时不起作用

更新2-我将event.keyCode==27更改为event.keyCode==65，瞧，按下“A”键，submit（）将工作。因此，问题在于对退出键的干扰。有什么想法吗

更新3-已解决-解决方案是在下面的代码中将keydown更改为keyup

结束更新

我的目标是捕获一个用户escape按键并转到一个新的url。我已经成功地捕获了转义键并调用了函数，该函数可以动态创建一个表单，并随传递的url一起提交。我已使用alert（）验证url是否正确传递，但表单不会提交。我想不出什么不起作用。提前谢谢

捕获转义键的键处理程序在这里（注意：解决方案是在下面的代码中将keydown更改为keyup-为了文章的完整性，我将其单独保留）：


window.addEventListener（“按键向下”，函数（事件）{
//绑定到命令（适用于Mac）和控制（适用于Win/Linux）
如果（event.keyCode==27）{
if（document.getElementById（'url'））{
path=document.getElementById（'url'）。值；
发布到url（路径）；
}
}
}，假）；
创建要发布的表单的函数如下：

<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>


函数post_to_url（路径、参数、方法）{
method=method | |“post”；//如果未指定，则默认将method设置为post。
//此代码的其余部分假定您没有使用库。
//如果你使用它，它可以变得不那么冗长。
var form=document.createElement（“表单”）；
form.setAttribute（“方法”，method）；
form.setAttribute（“动作”，路径）；
for（参数中的变量键）{
if（参数hasOwnProperty（键））{
var hiddenField=document.createElement（“输入”）；
setAttribute（“类型”、“隐藏”）；
setAttribute（“名称”，键）；
setAttribute（“值”，参数[key]）；
表格.appendChild（hiddenField）；
}
}
文件.正文.附件（表格）；
表单提交（）；
}
我将包含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>
首先，在调用
post_to_url
时，请确保传递了
params
参数。这似乎不会发生在keydown事件处理程序中
第二步检查
document.getElementById（'url'）.value的值是否指向要将数据提交到的脚本。

第三，确保
params
参数是带有成员/键的js对象


注意：您无需将表格添加到文档中即可提交。


在浏览上述清单后进行编辑，您应该拥有以下有效的代码


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);


最后，我将“keydown”改为“keydup”。这么简单-花了我几个小时。最后的侦听器代码如下。出于我的需要，除了url路径之外，我没有向post_to_url（）传递任何参数。您可能希望传递参数。你可以看到上面莫杰的例子


<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>




window.addEventListener（“按键向下”，函数（事件）{
//绑定到命令（适用于Mac）和控制（适用于Win/Linux）
如果（event.keyCode==27）{
if（document.getElementById（'url'））{
path=document.getElementById（'url'）。值；
发布到url（路径）；
}
}
}，假）；

我将在这里尝试一个未经测试的肢体——但请尝试
form.method
和
form.action
。在DOM中，属性和属性是完全不同的；form.action=路径；但这没用。谢谢你的建议。你的代码运行良好，但我认为你正在ie上测试，需要对当前的codeGood思想进行一些修改，但我在Firefox 22.0上（也在ie中测试）。我不需要任何参数，因为所有内容都包含在路径中。但为了测试，我在函数调用中传递了{'q'：'a'}。url在我的服务器上是一个有效的页面（我已经验证它是否通过了），但是表单从未提交。还有其他想法吗？我在我的测试表单中添加了唯一的HTML，所以整个测试都在上面，我粘贴了这段代码，但它不起作用。添加submit（）后，如果我单击此链接，并且还添加回代码行：document.body.appendChild（form）；我可以假设你已经测试过了，并且它在你的机器上工作了吗？越来越近了！作为测试，我将event.keyCode==27更改为event.keyCode==65。现在按下字母“A”，它就工作了！所以，逃生钥匙有点干扰。仅供参考-document.body.appendChild（表单）是它工作所必需的。现在来找出是什么干扰了退出键。

<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>