没有操作的表单，并且 enter 不会重新加载页面

Posted 2023-02-22

【中文标题】没有操作的表单，并且 enter 不会重新加载页面

【英文标题】：form with no action and where enter does not reload page

【发布时间】：2010-12-21 13:17:58

【问题描述】：

我正在寻找最简洁的方法来创建没有提交按钮的 html 表单。这本身很简单，但我还需要在完成类似提交的事情时阻止表单重新加载（例如，在文本字段中点击 Enter）。

【问题讨论】：

您希望它永远不会提交吗？

如果您只有一个带有单个 的

我希望它在其他条件下提交（实际上是点击某个按钮）。问题是我一直无法获得“在文本字段中输入”的发布/获取相同 url 的行为不会发生。因此，我精心创建的表单，您需要在其中执行 X、Y 和 Z 才能提交，可能会被用户按 Enter 错误地提交。

【参考方案1】：

您需要在表单中包含 action="javascript:void(0);" 以防止页面重新加载并保持 HTML 标准。

【讨论】：

刚刚花了 2 天时间试图在按下 enter 时抑制提交按钮的默认操作，因为尽管发生了该操作，但页面最终重新加载（Firefox）。添加 javascript void 作为表单上的操作修复了它。谢谢你。

感谢您提供额外的答案。这仍然有效 - 但这仍然是 2016 年的“最先进”解决方案吗？

@low_rents 我一直都在用它，个人还没有找到更好的解决方案。

感谢您提供精确且出色的解决方案，以解决按 Enter 键时重新加载页面的问题：) 最佳解决方案。

感谢您实际回答问题，而不是告诉开发人员他们应该做什么。

【参考方案2】：

向表单添加一个 onsubmit 处理程序（通过纯 js 或 jquery $().submit(fn)），除非满足您的特定条件，否则返回 false。

除非您不希望表单提交，否则为什么不直接省略表单元素上的“action”属性？

【讨论】：

根据标准，没有action 属性的表单不是表单 - 实际上会在某些浏览器中导致页面重新加载。我发现action="javascript:void(0);" 效果很好。跨度>

荷兰人的回答完美无缺。 Firefox 只是在刷新页面。

@Dutchie432 应该将其作为答案而不是评论。然后它会到达它所属的顶部。或者，KPrime 可以调整他的答案，因为省略该操作对我不起作用......

使用 jQuery 添加 onsubmit 处理程序可能会导致表单仍然在慢速连接上提交，其中 jquery 在点击后加载。

【参考方案3】：

只需将此事件添加到您的文本字段。它将阻止按 Enter 提交，您可以根据需要随意添加提交按钮或调用 form.submit()：

onKeyPress="if (event.which == 13) return false;"

例如：

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

【讨论】：

谢谢你。恐怕您的回答清晰明确地向我表明了先前答案的正确性，因此您没有得到公认的答案，但您确实得到了我的感谢和支持！

谢谢。乐意效劳。无论如何，我从来都不是聚光灯下的人。 ;)

【参考方案4】：

当您在表单中按 enter 时，表单的自然行为是提交，要停止这种不自然的行为，您必须使用 jquery 阻止它提交（默认行为）：

$("#yourFormId").on("submit",function(event)event.preventDefault())

【参考方案5】：

一个想法：

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

和

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    
</script>

【参考方案6】：

两种方法解决：

表单的操作值为“javascript:void(0);”。 为表单添加按键事件监听器以防止提交。

【讨论】：

收听按键事件（例如输入键）可能会给您带来textareas 的麻烦，并且可能会选择自动完成或下拉菜单，而移动设备可能是另一个麻烦来源。

【参考方案7】：

第一反应是最好的解决方案：

向表单添加一个 onsubmit 处理程序（通过纯 js 或 jquery $().submit(fn))，并返回 false，除非您的具体条件是 见了。

使用 jquery 更具体：

$('#your-form-id').submit(function()return false;);

除非您不希望表单提交，否则 - 在这种情况下，为什么 不只是省略表单元素上的 'action' 属性吗？

编写 Chrome 扩展程序是一个示例，说明您可能有一个供用户输入的表单，但您不希望它提交。如果您使用 action="javascript:void(0);"，代码可能会工作，但您最终会得到 this problem，您会收到关于运行内联 Javascript 的错误。

如果您完全忽略该操作，表单将重新加载，这在编写 Chrome 扩展程序时在某些情况下也是不希望的。或者，如果您有一个带有某种嵌入式计算器的网页，用户将在其中提供一些输入并单击“计算”或类似的东西。