Question

我正在使用Bootstrap3，html，css，php。如果可能，我不使用javascript或jquery。

我想制作一个有几个问题的表格，答案是：是的，不，没有回答。 Bootstrap3有单选按钮，看起来很理想，并且运行良好 - 如果我使用鼠标。但是，如果我按下按钮并按下空格，Bootstrap似乎相当严重。按钮值未发布。或者，如果我单击是按钮，然后使用箭头键更改为否，并提交表单，仍然会发布是值。这是在Linux Mint上的Firefox 36.0上。

有谁知道如何让单选按钮与键盘配合使用？

以下是示例代码（test2.php）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body>
<?php
  echo "<p>Value: ".$_POST["tstRadio"]."</p>";
?>
  <div class="page-wrapper">
    <form class="form-horizontal"
          action="test2.php"
          method="POST">
      <div class="form-group">
        <div class="col-xs-12 col-sm-9">
          <label class="control-label" for="tstRadio" >Question</label>
        </div>
        <div class="col-xs-12 col-sm-3">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</label>
            <label class="btn btn-primary"><input type="radio" name="tstRadio" value="no" >No</label>
          </div>
        </div>
      </div>
      <button type="submit"
              class="btn btn-primary btn-large"
              name="send"
             >Click to Submit Application</button>
      <p>&nbsp;</p>
    </form>
  </div>
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

显示已发布的值和单选按钮。我遗漏了我放在网站上的所有样式。

单击是按钮，选择是按钮（阴影中的细微变化 - 我有一些CSS使其更明显，但问题发生在没有那个）然后提交，值＆＃34;是＆＃34;已发布。点击否，然后点击提交，发布＆＃34;否＆＃34;显示。只需单击“提交”，就没有发布的值。好到目前为止。

接下来，在新表格上，我按Tab键。第一个问题：我无法确定哪个控件具有焦点。我按空间。选择是。啊哈 - 这才是重点。点击提交。但贴出的价值是空的！

接下来，单击“是”。按Tab键，右箭头。现在选择了No按钮。单击“提交”发布的值是＆＃34;是＆＃34; - 与用户期望的完全相反！

令我担心的是，人们可能已经让单选按钮显示了某些答案，然后提交了表格，并且记录了错误的答案。我对过去记录的内容无能为力，但我将来如何防止这种情况发生呢？

Answer 1

很抱歉回答我自己的问题，但我在其他地方发现过一篇文章，至少部分解决了这个问题。

在https://github.com/twbs/bootstrap/issues/6570有一篇由TurboKia发布的帖子，其中他取代了

中的“标签”

<label class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</label>

带“按钮”，即

<button class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</button>

我不明白这一点。当我查找如何在Bootstrap中执行单选按钮组时，例如 http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-buttons.php 它说使用＆lt; label＆gt;。但是＆lt; button＆gt;确实有效。唯一的问题是：无法看到被聚焦的按钮与被选中的按钮之间存在差异。但是我有一个小图像，透明背景上的浅色刻度标记，我用它作为所选按钮的背景：

<style>
  .btn-group > .btn-tick.active
  {
    background-image:url('images/TickMark_Light.png');
    background-repeat:no-repeat;
  }
</style>

...

<div class="btn-group" data-toggle="buttons">
  <button class="btn btn-primary btn-tick"><input type="radio" name="tstRadio" value="yes" >Yes</button>
  <button class="btn btn-primary btn-tick"><input type="radio" name="tstRadio" value="no" >No</button>
</div>

所以现在当我选中它时按钮会改变颜色，但只有当它有焦点时按空格键或者点击它时才会选中标记。我希望，这似乎可以解决这个问题。您可以看到何时选中了按钮，并且所选按钮和未选择按钮之间的差异不再仅仅是一种微妙的颜色变化 - 所选择的按钮上绘制了刻度标记。（我会说明这一点，但我没有上传图片的声誉。）

反对关于这些按钮应该如何工作的教程，让我想知道会出现什么问题 - 但是现在，我没有看到任何进一步的问题。

对不起，我没有这个小提琴。我确实尝试制作一个，但是我无法使用＆lt; label＆gt;来启动引导单选按钮组。或者使用＆lt; button＆gt;。

Bootstrap3单选按钮无法使用键盘

1 个答案: