twitter-bootstrap 如何使用 Bootstrap 聚焦输入表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18349597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have focused Input form with Bootstrap
提问by Lonely
I'm using Bootstrap 3.0.0 and I want to use the focused input form: See here, under Form States.. input focus
我正在使用 Bootstrap 3.0.0 并且我想使用焦点输入表单： 请参阅此处，在表单状态下..输入焦点
I have used <input class="form-control" id="focusedInput" type="text" value="This is focused...">this to get it as focused, but I'm not getting that. Documentation said to use :focusto get focused but I don't know how.
我已经用<input class="form-control" id="focusedInput" type="text" value="This is focused...">它来让它成为焦点，但我没有得到它。文档说用来:focus集中注意力，但我不知道如何。
some code in bootstrap.css
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);
}
采纳答案by Ionic? Biz?u
They present there only a focus demo. The #focusedInputstyles come from docs.cssand it's used just to force the focused look. That isn't included in Bootstrap pack, but only in documentation pages, as you can see in the following screen shoot (see: docs.css:1072):
他们只提供一个焦点演示。该#focusedInput风格来自docs.css和它只是用来强制专注的神情。这不包含在 Bootstrap 包中，而只包含在文档页面中，正如您在以下屏幕截图中看到的（请参阅：）docs.css:1072：
Then we have to create a CSS class that will have the focused styles:
然后我们必须创建一个具有焦点样式的 CSS 类：
.focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted ;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}
Now, only including focusedInputclass in HTML input elements, you will be able to set focus styles for non-focused elements.
现在，仅focusedInput在 HTML 输入元素中包含class，您将能够为非焦点元素设置焦点样式。
<input class="form-control focusedInput" type="text" value="This is focused...">
See the JSFIDDLE
查看JSFIDDLE
:focusselector is used for setting the styles for focused state of input.
:focusselector 用于设置输入焦点状态的样式。
例如：
#focusedInput:focus {
background: red;
}
This will set red background when you focus the input.
当您聚焦输入时，这将设置红色背景。
回答by omar.furrer
You can achieve what you want by setting the autofocus attribute inside the input tag to autofocus. The keyboard input will be focused on the input field and it will glow.
您可以通过将 input 标签内的 autofocus 属性设置为 autofocus 来实现您想要的。键盘输入将集中在输入字段上，它会发光。
<input class="form-control" id="focusedInput" type="text" autofocus="autofocus" value="This is focused...">
回答by canoodle
$("#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);
}
回答by giovannif23
You just needed to remove the space between the :focus selector on the .form-control class.
您只需要删除 .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);
}
回答by Nickos
I had the same problem so i tried to search the css of bootstrap. i had download one theme of bootswatch and replace it with the bootstrap so that might be the problem in my case. Anyhow what i found was that the form-control:focushad outline:0that means it was disabling the focus effect. i erased that line and worked like a charm.Try it if anyone has the same problem.Hope it helped.
我遇到了同样的问题，所以我尝试搜索 bootstrap 的 css。我已经下载了 bootswatch 的一个主题并将其替换为引导程序，因此这可能是我的问题。总之我发现是，form-control:focus有outline:0这意味着它是禁用的聚焦效应。我擦掉了那条线并像魅力一样工作。如果有人遇到同样的问题，请尝试一下。希望它有所帮助。
