假设您在HTML表单中创建了一个向导。一个按钮后退,一个按钮前进。因为当您按Enter键时,返回按钮首先出现在标记中,它将使用该按钮提交表单。

例子:

< >形式 <!—将光标移至该字段,按“Enter”。—> <input type="text" name="field1" /> <!这是提交的按钮——> <input type="submit" name="prev" value="Previous Page" /> <!——但这是我想提交的按钮——> <input type="submit" name="next" value=" next Page" /> > < /形式

我想要确定当用户按Enter键时使用哪个按钮提交表单。这样,当您按下Enter键时,向导将移动到下一页,而不是上一页。你必须使用tabindex来做这个吗?


当前回答

在大多数浏览器中,无需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和谷歌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>

所以这个解决方案的缺陷是:

如果您使用关闭JavaScript的Internet Explorer,“上一页”将无法工作。

请注意,后退按钮仍然有效!

其他回答

这是我尝试过的:

你需要确保你给你的按钮不同的名字 编写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();
}

纯HTML无法做到这一点。要做到这一点,必须依赖JavaScript。

但是,如果在HTML页面上放置两个表单,则可以做到这一点。

Form1将拥有前面的按钮。

Form2将有任何用户输入+下一个按钮。

当用户在Form2中按下Enter键时,Next提交按钮将触发。

与其纠结于多次提交,JavaScript或类似的东西来做一些上/下的事情,另一种选择是使用旋转木马来模拟不同的页面。 这样做:

你不需要多个按钮,输入或提交来做上一个/下一个事情,你只有一个输入类型="submit"在只有一个形式。 整个表单中的值一直存在,直到表单提交为止。 用户可以切换到任何上一页和下一页来完美地修改值。

使用Bootstrap 5.0.0的示例:

<div id="carousel" class="carousel slide" data-ride="carousel">
    <form action="index.php" method="post" class="carousel-inner">
        <div class="carousel-item active">
            <input type="text" name="lastname" placeholder="Lastname"/>
        </div>
        <div class="carousel-item">
            <input type="text" name="firstname" placeholder="Firstname"/>
        </div>
        <div class="carousel-item">
            <input type="submit" name="submit" value="Submit"/>
        </div>
    </form>
    <a class="btn-secondary" href="#carousel" role="button" data-slide="prev">Previous page</a>
    <a class="btn-primary" href="#carousel" role="button" data-slide="next">Next page</a>
</div>

另一个简单的选项是将返回按钮放在HTML代码中的提交按钮之后,但将其浮动到左侧,这样它就会出现在提交按钮之前的页面上。

要做到这一点,只需改变制表符顺序即可。保持简单。

<input type="submit" name="prev" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

保持所有提交按钮的名称相同:“prev”。

唯一的区别是具有唯一值的value属性。在创建脚本时,这些惟一的值将帮助我们确定按下了哪个提交按钮。

并编写以下代码:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if