多提交的按钮上的HTML form–指定一个按钮，如默认[重复]

StackOverflow https://stackoverflow.com/questions/1963245

  •  21-09-2019
  •  | 
  •  

题

这个问题已经有一个答案在这里：

我有一种形式，有三个提交的按钮如下：

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

该行中的按钮是一个混合的提交、复和JavaScript按钮。按钮的顺序有变化，但在任何情况下保存按钮之间仍然存在上一个和下一个按钮。

这里的问题是，当一个用户命 输入 提交形式，后变量的"命令"包含"一个";正常的，因为这是第一个提交按钮在的形式。但是我想"下一步"按钮被触发时的用户提交的形式通过 输入 按钮。它是一种像设定为默认提交按钮，即使有其他按钮之前。

有帮助吗？

解决方案

我的建议是不打击这种行为。你可以有效地改变了使用浮动。例如：

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

有：

#buttons { overflow: hidden; }
#buttons input { float: right; }

将有效地反的顺序并因此"下一个"按钮将是值触发通过点击进入。

这种技术将涵盖许多情况下，而不必诉诸于更多哈克JavaScript方法。

其他提示

第一个按钮总是默认的它不能被改变。虽然你 可以 试试修好它与JavaScript的形式表现的意外地浏览器中没有编写脚本，而且有一些可用性/无障碍情况，要考虑。例如，代码联通过Zoran将意外提交形式上输入新闻中的一个 <input type="button">, ，这通常不会发生，并且不会抓住即的行为提出的形式为该按关于其他非现场的内容的形式。所以如果你点击某些文本中的一个 <p> 形式与该脚本，并按输入错误的按钮将提交...尤其是危险的，如果，因为鉴于在那个例子，实际默认的按钮是"删除"!

我的建议会被忘记关于使用脚本黑客重新分配defaultness.去流的浏览器和只是把默认的按钮第一次。如果你不能破解的布局给你的屏幕上了你想要的，那么你可以做到这一点通过具有虚设的按钮看不见第一来源，有相同的名称/价值为按钮你想要的是默认：

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(注：定位用于推动按钮关掉屏幕上因为 display: none 和 visibility: hidden 浏览器的可变的副作用上的按钮是否被作为默认，它是否提交。)

快'n'dirty您可以创建一个隐藏的副本提交键的，这应使用当按下输入。

例CSS

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

例HTML

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

如果有人现在打输入您的形式，(隐藏)下按钮将会被用来作为提交人。

测试IE9，火狐，铬和歌剧院

设置 type=submit 按钮你想的默认和 type=button 向其他按钮。现在在下面的表格你可以打输入任何输入域，和 Render 按钮会的工作(尽管事实上它是第二个按钮在的形式)。

例如：

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

测试FF24和铬35.

如果你使用jQuery，这种解决方案从一个评论 在这里， 是非常漂亮:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

只是添加 class="default" 按钮你想要的默认。它把一个隐藏的复制的那个按钮在右开始的形式。

我复活该因为我是研究非JavaScript的方式做到这一点。我不是进入关键的处理程序和CSS定位的东西是导致签订打破由于CSS重新定位不会改变选项的顺序。

我的解决方案是根据反应 https://stackoverflow.com/a/9491141.

该方案的来源如下。tabindex用于正确的标签行为的隐藏的按钮，以及aria-隐藏起来，避免具有的按钮读通过屏幕阅读器的/所确定的由辅助设备。 

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

第1次按钮在DOM 第2按钮在DOM 第3按钮在DOM

必须CSS为这个解决方案：

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

另一个解决方案，使用jQuery:

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

这应该在以下形式，使得"更新"默认的行动：

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

以及：

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

这一陷阱的进入关键的，只有当输入领域在形成有重点。

你不应该使用按相同的名称。这是不好的语义。相反，应修改后端寻找不同的名称值设置为：

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

因为我不知道是什么语言上使用后端，我会给你一些伪:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

bobince的解决方案具有的缺点在于创建一个按钮，它可能 卡-d，但无法使用。这可能造成混乱键盘的用户。

一个不同的解决办法是使用名 form 属性：

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

这个是 标准HTML, 然而不幸的是不支持在因特网浏览器。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top