是否可以通过编程方式在文本输入框中使用返回字符来触发表单提交?

时间:2011-03-24 16:21:22

标签: javascript javascript-events firefox-addon keyboard-events

问题:是否可以在设置为值的字符行末尾包含某种类型的字符(如\ r或\ n,或由编码函数生成的某些字符)一个文本输入元素,以诱导表单提交该内容 - 就像在文本输入框中点击Return键可以导致表单提交?我遇到了一些非浏览器客户端,它们在粘贴包含回车字符的复制文本时提交数据 - 所以我想知道这在javascript中是否可能以某种方式存在?到目前为止,在此页面/脚本的环境中,我尝试添加\r\n\r\n\r但没有成功 - 但我想知道某些特殊字符是否可行,或者可能是某种程度上错过了什么。

背景 我正在开发一个Firefox扩展,它需要填充一个输入框,然后在框架集中提交一个表单。表单本身具有自己的脚本定义(即,不是扩展代码的一部分)onsubmit功能。我已经读过执行form.submit()会阻止表单的onsubmit属性执行;并使用onsubmit()提交表单无法提供页面的正确功能,这表明它是onsubmit代码中需要执行的脚本定义函数 - 这意味着只需通过javascript填充框然后提交使用javascript的表单将无法正常工作。我可以尝试通过触发页面上的事件以某种方式调用网站的功能,但是这会产生一个糟糕的情况,我们正在解决一个解决方案(在javascript中并不常见) - 但事情会更多如果可以简单地将一个返回类型的字符附加到正在插入到input元素的value属性中的字符串的末尾,那就是优雅的。

进度: John,Jon和Frog,感谢大家的贡献。看起来我需要做一个keydown或keyup事件的create-init-dispatch。随着进一步的进展,我会进一步通报;新的见解仍然非常受欢迎 - 特别是在类别中:“这可能真的有效并导致提交表格吗?”

我试图摆弄扩展本身但遇到了一些问题。为了测试一般的键盘事件的调度,我创建了一个简单的HTML测试文档 - 然而,似乎这里出了点问题。单击按钮时,我收到“已发送”警报,但当myKeyCode为65(“A”的值)时,没有任何内容添加到输入框中。当值为13(或RETURN)时,它也不会提交。也许有人可以在这段代码中发现错误。代码是可测试的&可编辑http://jsbin.com/orudu4/1/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Tester for Extension</title>
        <script type="text/javascript">
            var myKeyCode = 65; // should be "A"
            // var myKeyCode = 13; // should be RETURN
            function fireIt(){
                var el = document.getElementById("inputId");
                el.focus();
                var e = document.createEvent('KeyboardEvent');
                e.initKeyEvent('keydown', true, true, window, false, false, false, false, myKeyCode, 0);
                el.dispatchEvent(e);
                alert("dispatched");
 }
        </script>
    </head>
    <body>
        <form action="nowhere.html" onsubmit="alert('submited');">
            <input type="button" value="button" onclick="fireIt()" />
            <input type="text" id="inputId" value="value" />
        </form>
    </body>
</html>

说明: 我从一些评论者(尽管如此提供了很好的答案)中看到,有些人在阅读上述内容时假设我正在让用户点击密钥。事实并非如此。触发必要操作的事件包括:1)用户单击工具栏上的按钮,以及2)html中的更改

4 个答案:

答案 0 :(得分:1)

使用keydown事件:

   document.getElementById("YourInputID").onkeydown = function(evt) {
     evt = evt || window.event;
     if (evt.keyCode == 13) {
        // submit your form
     }
   }

或者如果您在HTML中附加事件

<script>
   function enterKeyPressed(evt) {
     evt = evt || window.event;
     if (evt.keyCode == 13) {
       // submit your form
     }
   }
</script>

<body>
   <input type="text" onkeydown="enterKeyPressed(event)" />
</body>

答案 1 :(得分:1)

编辑:没看到你只需要javascript。

也许您可以POST到表单网址?


如果您按下回车键的按键怎么办?

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}

$(function() {
  $('body').keypress(function(e) {
alert(e.which);
  });

  simulateKeyPress("e");
});

取自HERE

答案 2 :(得分:1)

根据您对John的回答的评论,听起来问题不在于您希望在用户按Enter键时自动提交表单。当用户按下Enter键时,表单已经自动提交,并且您希望模拟用户从您的分机按Enter键。如果我理解正确,我想你想要dispatchEvent。如果你浏览jQuery源代码,你可能会发现这是jonshariat的建议。

答案 3 :(得分:0)

这里的答案似乎是“NO” - 以表格形式插入到输入元素中的返回字符不会触发表单提交。

我已经注意到,只需将\ n或\ r \ n附加到字符串的末尾即可将其设置为输入元素的value属性;经过多次试验和错误,我终于成功地使用键盘事件向输入字段添加了标准的可见字符(“A”)。然后我尝试在输入字段中使用回车符,换行符和换页符,并且这些都不会导致表单提交。

关于让这项工作 - 如果没有jonshariat,John Hartstock和MatrixFrog的建议,我不会想到这一点。我还做了一些研究。事实证明:我们需要一个按键事件,而不是一个keydown事件;创建的事件类型是KeyEvents而不是KeyboardEvent;和十六进制代码用于指定字符而不是标准的十进制表示法。

以下是测试脚本:http://jsbin.com/eyiko5/1/edit