Question

我正在使用Bootstrap 3.0.0，我想使用重点输入表单： See here, under Form States.. input focus

我已经使用<input class="form-control" id="focusedInput" type="text" value="This is focused...">来使它成为焦点，但我没有得到它。文档说使用:focus来集中精力，但我不知道如何。

bootstrap.css中的一些代码

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control :focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Answer 1

您可以通过将输入标记内的autofocus属性设置为自动对焦来实现您的目的。键盘输入将聚焦在输入字段上，它会发光。

<input class="form-control" id="focusedInput" type="text" autofocus="autofocus" value="This is focused...">

Answer 2

他们只展示了焦点演示。 #focusedInput样式来自docs.css，它仅用于强制集中注视。这不包含在Bootstrap包中，但只包含在文档页面中，您可以在下面的屏幕截图中看到（参见：docs.css:1072）：

然后我们必须创建一个具有焦点样式的CSS类：

.focusedInput {
    border-color: rgba(82,168,236,.8);
    outline: 0;
    outline: thin dotted \9;
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}

现在，只在HTML输入元素中包含focusedInput类，您就可以为非聚焦元素设置焦点样式。

<input class="form-control focusedInput" type="text" value="This is focused...">

请参阅JSFIDDLE

:focus选择器用于设置聚焦状态的输入样式。

JSFIDDLE

For example：

#focusedInput:focus {
    background: red;
}

当您对输入进行聚焦时，这将设置红色背景。

Answer 3

$("#inputID").focus(); // will bring focus
$("#inputID").addClass("focusedInput"); // will give it the bootstrapped focus style
scrollTo("#confirm_deletion"); // actually make browser go to that input

/* scroll to the given element section of the page */
function scrollTo(element)
{
    $('html, body').animate({scrollTop: $(element).offset().top-60}, 500);
}

Answer 4

您只需要删除.form-control类上的：focus选择器之间的空格。

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

JS FIDDLE

Answer 5

我有同样的问题所以我试图搜索引导程序的CSS。我下载了一个bootswatch的主题，并用引导程序替换它，这可能是我的问题。无论如何，我发现form-control:focus有outline:0这意味着它禁用了焦点效果。我删除了这条线并像魅力一样工作。如果有人遇到同样的问题，试试吧。希望它有所帮助。

如何使用Bootstrap集中输入表单

5 个答案: