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

发布于 2024-10-26 10:17:01 字数 2471 浏览 1 评论 0原文

问题：是否可以在设置为文本值的字符行末尾包含某种类型的字符（例如 \r 或 \n，或由编码函数生成的某些字符） input 元素，以诱导表单提交该内容 - 就像在文本输入框中按 Return 键可以导致表单提交一样？我遇到过一些非浏览器客户端，它们在粘贴复制的文本（包括回车符）时提交数据 - 所以我想知道这在 Javascript 中是否可能？到目前为止，在此页面/脚本的环境中，我已尝试附加 \r、\n 和 \r\n\r 而没有成功 - 但我想知道某些特殊字符是否可能起作用，或者可能我是否遗漏了某些东西。

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

进展： 约翰、乔恩和青蛙，感谢大家在此做出的贡献。看起来我需要对 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 中的更改

原文

Question: Is it possible to include some type of character (like \r or \n, or some character generated by an encoding function) at the end of a line of characters set as the value of a text input element, in order to induce the form to submit that content - much like hitting the Return key in a text input box can cause a form to submit? I have come across some non-browser clients which submit data when copied text including carriage return characters are pasted - so I wonder if this might somehow be possible in Javascript? So far, in this page/script's environment, I have tried appending \r, \n, and \r\n\r with no success - but am wondering if some special character might work, or possibly if I'm somehow missing something.

Background:
I'm working on a Firefox extension which needs to fill an input box and then submit a form inside a frameset. The form itself has its own script-defined (i.e., not part of the extension code) onsubmit function. I have read that executing a form.submit() prevents a form's onsubmit attribute from executing; and using onsubmit() to submit the form fails to provide the page's proper function, which indicates to me that it's the script-defined function in the onsubmit code which needs to be executed - meaning that simply filling the box via Javascript and then submitting the form with Javascript will not work. I could try to somehow call the site's function by triggering an on-page event, but this creates a klugey situation where we are working around a work-around solution (which isn't so uncommon in Javascript) - but things would be much more elegant if it's possible to simply append a return-type character to the end of the string which is being inserted into the input element's value attribute.

Progress:
John, Jon, and Frog, thanks all for your contributions here. It looks like I'm going to need to be doing a create-init-dispatch of either a keydown or keyup event. I'll inform further as further progress is made; new insights still very much welcome - especially in the category: "Is this likely to actually work and cause the form to be submitted?"

I tried fiddling with the extension itself but came across some problems. In order to test dispatching of keyboard events in general, I've created a simple HTML test document - it seems, however, that something is wrong here. When clicking the button, I do receive the "dispatched" alert, but nothing is added to the input box when myKeyCode is 65 (the value for "A"). It also isn't submitting when the value is 13 (or RETURN). Perhaps someone can find something wrong in this code. Code is testable & editable at 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>

Notice:
I see from some commenters (who nonetheless provided great answers) that some when reading the above are assuming that I'm having the user hit a key. This isn't the case. The events triggering the necessary action here are: 1) a user clicking on a button on the toolbar, and 2) a change in the html

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我最亲爱的 2024-11-02 10:17:01

编辑：没有看到你只需要 javascript。

也许您可以 POST 到表单 URL？

如果模拟回车键按下怎么办？

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

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

  simulateKeyPress("e");
});

摘自此处

Edit: Didn't see you needed javascript only.

Perhaps you can POST to the forms URL?

What if you simulate the key press of the enter key?

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

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

  simulateKeyPress("e");
});

Taken from HERE

回复收藏 0 原文

唱一曲作罢 2024-11-02 10:17:01

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

Using the keydown event:

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

or if your attaching the event in your HTML like this

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

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

回复收藏 0 原文

她如夕阳 2024-11-02 10:17:01

根据您对约翰回答的评论，听起来问题不在于您希望用户按 Enter 时自动提交表单。当用户按 Enter 键时，表单已自动提交，并且您希望模拟用户从扩展程序中按 Enter 键。如果我理解正确，我认为你想要 dispatchEvent< /a>.如果您浏览 jQuery 源代码，您可能会发现 jonshariat 的建议就是这样做的。

回复收藏 0 原文

一杆小烟枪 2024-11-02 10:17:01

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

我已经注意到，这不能通过简单地将 \n 或 \r\n 附加到设置为输入元素的 value 属性的字符串末尾来完成；经过多次尝试和错误，我终于成功地使用键盘事件将标准的可见字符（“A”）添加到输入字段。然后，我尝试在输入字段中使用回车符、换行符和换页符，但这些字符都没有引发表单提交。

关于如何让它发挥作用——如果没有 jonshariat、John Hartstock 和 MatrixFrog 的建议，我不会想出这个办法。我还做了一些更多的研究。事实证明：我们需要一个按键事件，而不是一个按键事件；创建的事件类型是 KeyEvents 而不是 KeyboardEvent；并且使用十六进制代码代替标准十进制表示法来指定字符。

这是测试脚本： http://jsbin.com/eyiko5/1/edit

回复收藏 0 原文

~没有更多了~