Kev*_*vin 252 html forms form-submit submit-button
假设您在HTML表单中创建向导.一个按钮返回,一个按钮前进.由于当您按Enter键时,后退按钮首先出现在标记中,因此它将使用该按钮提交表单.
例:
<form>
<!-- Put your cursor in this field and press Enter -->
<input type="text" name="field1" />
<!-- This is the button that will submit -->
<input type="submit" name="prev" value="Previous Page" />
<!-- But this is the button that I WANT to submit -->
<input type="submit" name="next" value="Next Page" />
</form>我想做的是,当用户按Enter键时,决定使用哪个按钮来提交表单.这样,当您按Enter键时,向导将移至下一页,而不是之前的页面.你必须用tabindex这个吗？
pal*_*asb 137
我希望这有帮助.我只是在做float右边按钮的技巧.
这样,Prev按钮保留在Next按钮下,但Next在HTML代码中排在第一位:
.f {
float: right;
}
.clr {
clear: both;
}<form action="action" method="get">
<input type="text" name="abc">
<div id="buttons">
<input type="submit" class="f" name="next" value="Next">
<input type="submit" class="f" name="prev" value="Prev">
<div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
</div>
</form>编辑:优于其他建议:没有JavaScript,无法访问,两个按钮都保留Prev
Wal*_*ess 58
您是否可以将以前的按钮类型更改为如下按钮:
<input type="button" name="prev" value="Previous Page" />
现在,Next按钮将是默认按钮,此外您还可以向其添加default属性,以便您的浏览器将突出显示它,如下所示:
<input type="submit" name="next" value="Next Page" default />
希望有所帮助.
hus*_*int 52
为您的提交按钮提供如下相同的名称:
<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />
当用户按Enter键并且Request转到服务器时,您可以检查submitButton包含表单name/value对集合的服务器端代码的值.例如在经典ASP中:
If Request.Form("submitButton") = "Previous Page" Then
' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
' Code for the next page
End If
Pol*_*nby 29
如果默认情况下使用第一个按钮的事实在浏览器中是一致的,为什么不在源代码中将它们放在正确的方向,然后使用CSS来切换它们的表观位置？float例如,他们左右移动以在视觉上切换它们.
Sco*_*reu 16
如果你真的只是希望它像安装对话框那样工作,那么只关注"下一步"按钮OnLoad.这样,如果用户点击Return,表单就会提交并继续前进.如果他们想要返回,他们可以点击Tab或点击按钮.
net*_*iul 16
有时@palotasb提供的解决方案是不够的.有些用例例如"过滤器"提交按钮放在"下一个和上一个"之类的按钮上方.我找到了一个解决方法:复制提交按钮,该按钮需要作为隐藏div中的默认提交按钮,并将其放在任何其他提交按钮上方的表单内.从技术上讲,当按下Enter键然后单击可见的Next按钮时,它将通过不同的按钮提交.但由于名称和价值相同,因此结果没有区别.
<html>
<head>
<style>
div.defaultsubmitbutton {
display: none;
}
</style>
</head>
<body>
<form action="action" method="get">
<div class="defaultsubmitbutton">
<input type="submit" name="next" value="Next">
</div>
<p><input type="text" name="filter"><input type="submit" value="Filter"></p>
<p>Filtered results</p>
<input type="radio" name="choice" value="1">Filtered result 1
<input type="radio" name="choice" value="2">Filtered result 2
<input type="radio" name="choice" value="3">Filtered result 3
<div>
<input type="submit" name="prev" value="Prev">
<input type="submit" name="next" value="Next">
</div>
</form>
</body>
</html>
Fly*_*wat 15
凯文,这不能用纯HTML来完成.你必须依靠JavaScript才能获得这个技巧.
但是,如果在HTML页面上放置两个表单,则可以执行此操作.
Form1将具有上一个按钮.
Form2将有任何用户输入+下一个按钮.
当用户Enter在Form2中按下时,将触发下一个提交按钮.
Yaa*_*lis 14
我会使用Javascript提交表单.该函数将由表单元素的OnKeyPress事件触发,并将检测是否已选择Enter键.如果是这种情况,它将提交表格.
这里有两个页面,就如何做到这一点技巧:1,2.基于这些,这是一个使用示例(基于此处):
<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
var keycode;
if (window.event) {
keycode = window.event.keyCode;
} else if (e) {
keycode = e.which;
} else {
return true;
}
if (keycode == 13) {
myfield.form.submit();
return false;
} else {
return true;
}
}
//--></SCRIPT>
<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
小智 12
凯文,
这在大多数浏览器中都没有javascript或CSS:
<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>
Firefox,Opera,Safari,Google Chrome都可以使用.
一如既往,IE就是问题所在.
此版本在javascript打开时有效:
<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>
所以这个解决方案的缺陷是:
如果你使用IE与Javascript关闭,上一页不起作用.
请注意,后退按钮仍然有效!
小智 11
如果您在一个页面上有多个活动按钮,那么您可以执行以下操作:
在Enter按键上将您想要触发的第一个按钮标记为表单上的defaultbutton.对于第二个按钮,将其与Backspace键盘上的按钮相关联.Backspaceeventcode是8.
$(document).on("keydown", function(event) {
if (event.which.toString() == "8") {
var findActiveElementsClosestForm = $(document.activeElement).closest("form");
if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
$("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
}
}
});<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<form action="action" method="get" defaultbutton="TriggerOnEnter">
<input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
<input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>希望这可以帮助.
Ken*_*son 10
更改Tab键顺序应该是完成此操作所需的全部内容.把事情简单化.
另一个简单的选择是将后退按钮放在HTML代码中的提交按钮之后,但将其浮动到左侧,使其显示在提交按钮之前的页面上.
小智 9
保持所有提交按钮的名称相同 - "prev"唯一的区别是value具有唯一值的属性.当我们创建脚本时,这些唯一值将帮助我们找出按下哪个提交按钮.
并写下以下编码:
<input type="submit" name="perv" value="Previous Page">
<input type="submit" name="prev" value="Next Page">
我第一次遇到这种情况时,我想出了一个onclick()/ js hack,当选择不是上一个/下一个时,我仍然喜欢它的简单性.它是这样的:
@model myApp.Models.myModel
<script type="text/javascript">
function doOperation(op) {
document.getElementById("OperationId").innerText = op;
// you could also use Ajax to reference the element.
}
</script>
<form>
<input type="text" id = "TextFieldId" name="TextField" value="" />
<input type="hidden" id="OperationId" name="Operation" value="" />
<input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
<input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>
当单击任一提交按钮时,它将所需操作存储在隐藏字段(这是与表单关联的模型中包含的字符串字段)中,并将表单提交给Controller,后者执行所有决定.在Controller中,您只需编写:
// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
// Do read logic
}
else if (myModel.Operation == "Write")
{
// Do write logic
}
else
{
// Do error logic
}
您也可以使用数字操作代码稍微加强这一点,以避免字符串解析,但除非您使用Enums,否则代码的可读性,可修改性和自我记录性较差,无论如何解析都是微不足道的.
这是我尝试过的:1.你需要确保给你的按钮不同的名字2.编写一个if语句,如果点击任一按钮,将执行所需的操作.
<form>
<input type="text" name="field1" /> <!-- Put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
在PHP中,
if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}
if(isset($_POST['next']))
{
header("Location: next.html");
die();
}
来自https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
表单元素的默认按钮是树顺序中的第一个提交按钮,其表单所有者是该表单元素.
如果用户代理支持让用户隐式提交表单(例如,在某些平台上按下"enter"键而文本字段被聚焦时隐式提交表单)...
让下一个输入为type ="submit"并将之前的输入更改为type ="button"应该给出所需的默认行为.
<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->
<input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
我在尝试找到基本相同的答案时遇到了这个问题,只有asp.net控件,当我发现asp按钮有一个名为的属性UseSubmitBehavior允许你设置哪个提交.
<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
以防万一有人正在寻找asp.net按钮的方式来做到这一点.
使用javascript(此处为jQuery),您可以在提交表单之前禁用prev按钮.
$('form').on('keypress', function(event) {
if (event.which == 13) {
$('input[name="prev"]').prop('type', 'button');
}
});