问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用 Javascript 更改在按下回车键时激活哪个提交

社区维基
1
新手上路，请多包涵

我在 HTML 页面上有一个表单，其中包含多个执行不同操作的提交按钮。但是，当用户在文本输入中键入一个值并按下回车键时，浏览器通常表现得好像下一个提交按钮被顺序激活。我想要一个特定的动作发生，所以我找到的一个解决方案是在有问题的文本输入之后直接将不可见的提交按钮放入 HTML，如下所示：

 <input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

这在大多数浏览器中就像一个魅力，除了它在 Safari 和 Chrome 等 webkit 浏览器中没有。出于某种原因，他们跳过了不可见的提交按钮。我一直在尝试弄清楚如何拦截回车键并使用 Javascript 激活正确的提交，但我一直无法让它工作。拦截 keydown 并将焦点设置在正确的提交上是行不通的。

有什么方法可以使用 Javascript 或其他方式来选择当用户在 HTML 表单的文本输入中按下回车键时将使用哪个提交按钮？

编辑：澄清一下，表单不能要求 Javascript 从根本上“工作”。我不在乎在 webkit 浏览器上没有 Javascript 是否需要输入键提交，但我无法删除或更改提交按钮的顺序。

这是我尝试过的，它不会改变 webkit 浏览器中的提交行为。

有效的是将以下代码中的 focus() 更改为 click() 。

 document.onkeypress = processKey;

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click(); // previously: focus()
    }
}

编辑：最终解决方案：

适用于所有浏览器，仅在需要时拦截回车键：

HTML:

 <input type="text" name="something" value="blah"
    onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

Java脚本：

 function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click();
        return false;
    }
}

原文由 postfuturist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlwebformssubmituser-input
阅读 814
2 个回答
得票最新
社区维基
1
✓ 已被采纳

一种方法是删除所有提交按钮并使用输入按钮以编程方式提交表单。这将消除通过在文本框中按下回车键来提交表单的能力。您还可以将一个提交按钮保留为默认提交功能，并为其他按钮使用常规按钮输入并以编程方式提交表单。

这样做的明显不足是用户需要启用 JavaScript。如果这不是问题，这是您的考虑因素。

编辑：

在这里，我尝试使用 jQuery 为您做一个示例（不用 jQuery 也可以轻松创建相同的功能）…让我知道这是否有帮助…

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"><!--
    $(document).ready(function(){
        $("#f input").filter(":text").keydown( function(event) {
            if (event.keyCode==13) {
                $(this).nextAll().eq(0).click();
            }
        });
    });
    //--></script>
</head>
<body>
    <form name="f" id="f">
        <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
        <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
        <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
    </form>
</body>
</html>

原文由 cLFlaVA 发布，翻译遵循 CC BY-SA 2.5 许可协议

社区维基
1

不可见的默认提交操作是一种合理的方法，不会将 JavaScript 拖入等式。然而，带有“display: none”的表单元素通常不可靠。我倾向于在页面上的其他按钮之前使用绝对定位的提交按钮，位于页面的左侧。它仍然很丑陋，但可以完成工作。

原文由 bobince 发布，翻译遵循 CC BY-SA 2.5 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题