gpt4 book ai didi

html - Bootstrap3 单选按钮不适用于键盘

转载 作者:行者123 更新时间:2023-11-28 01:34:11 32 4
gpt4 key购买 nike

我正在使用 Bootstrap3、html、css、php。如果可能的话,我不使用 javascript 或 jquery。

我想制作一个包含几个问题的表格,答案是:是、否、未回答。 Bootstrap3 有单选按钮,看起来很理想,而且效果很好——如果我使用鼠标的话。但是,如果我切换到按钮并按空格键,Bootstrap 似乎严重损坏。按钮值未发布。或者,如果我单击"is"按钮,然后使用箭头键更改为“否”并提交表单,"is"值仍会发布。这是在 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>

这显示发布的值和单选按钮。我省略了网站上的所有样式。

单击"is"按钮,选择"is"按钮(阴影有细微变化——我有一些 CSS 使其更明显,但没有它就会出现问题)然后在提交上,值"is"已发布.单击“否”,然后单击“提交”,显示张贴的“否”。只需单击提交,没有发布值。到目前为止还不错。

接下来,在新表单上,我按 Tab 键。第一个问题:我看不到哪个控件具有焦点。我按空格键。选择是。啊哈——那才是重点。点击提交。但是发布的值是空的!

下一步,单击"is"。按 T​​ab,右箭头。现在选择了否按钮。单击提交。发布的值为"is"——与用户的预期完全相反!

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

最佳答案

很抱歉回答我自己的问题,但我在别处看到一篇至少部分解决了这个问题的帖子。

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它说要使用

关于html - Bootstrap3 单选按钮不适用于键盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29090108/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com