引导响应-文本字段未接收焦点
Bootstrap responsive - Textfield not receiving focus
我正在使用Bootstrap 3,我的代码如下。将浏览器缩小到小屏幕视图。单击"搜索"图标,将显示一个搜索字段。我正试图让这个文本字段成为焦点,但我看不到!$("#search_field").focus();
不工作。我认为问题是因为搜索按钮本身获得了焦点,而我不知道如何将其提供给我的文本字段。帮助
HTML
<form>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span style="font-size:9px;">MENU</span><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<button id="test1" type="button" class="navbar-toggle btn-link btn-lg collapsed" data-toggle="collapse" data-target="#search_group" aria-expanded="false"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button>
<a class="navbar-brand" href="#"></a> </div>
<!-- end navbar-header -->
<div id="nav" class="navbar-collapse collapse">
<div id="navTop" class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown site-toggle" > <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span style="color:#eaab00;">Links</span> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Test</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- end nav -->
</div>
<!-- end container -->
</nav>
<div class="container">
<div class="row">
<div id="search_group" class="navbar-collapse collapse">
<div class="col-xs-12 input-group">
<input id="search_field" type="text" class="form-control" placeholder="Search the site..." />
<i class="glyphicon glyphicon-search form-control-feedback"></i> </div>
</div>
<!-- end col searchText -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</form>
JS
$(document).ready(function () {
$('#test1').on('click', function () {
//$('#test1').blur();
$("#search_field").focus();
})
});
CSS
/* Main styles */
body { margin-top: 125px; }
/* Main Nav */
nav {
background-color: #222222;
height: 50px;
}
nav .dropdown-menu {border: 1px solid #00b0ca;}
/* Small screen buttons */
nav button {
border: 0 !important;
border-radius: 0 !important;
}
nav button[aria-expanded="true"] {background-color: #00b0ca !important;}
nav button.btn-link {
padding-top: 12px;
}
nav button.navbar-toggle {
margin-top: 0;
margin-bottom: 0;
margin-left: 7px;
margin-right: 0;
width:50px;
height:50px;
}
nav button span { color: #fff; }
nav button span.icon-bar { background-color: #fff; }
nav .navbar-toggle .icon-bar {
width: 25px;
margin-left: 2px;
}
/* Breadcrumbs and Search */
#search_group {
background-color: transparent;
float:right;
width:25%;
}
#search_group>div { margin: 6px 0;}
/* Small screens - iPad portrait, Phones */
@media (max-width: 992px) {
body { margin-top: 50px; }
/* Breadcrumbs and Search */
#search_group {
background-color:#00b0ca;
float: none;
width: auto;
}
#search_group>div { margin: 10px 0;}
}
$(document).ready(function () {
$('#search_group').on('shown.bs.collapse', function () {
$("#search_field").focus();
})
});
https://jsfiddle.net/914sdezs/
希望这对有帮助
相关文章:
- 在IE9中的输入字段中输入焦点最近按钮
- 将焦点设置在下拉切换的角度 js 上的第一个输入字段上
- 渲染后如何在输入字段上设置焦点
- 如何在动态树标题中的输入字段上设置焦点
- 为什么欧芹不验证每个字段(例如失去焦点),而我调用$('#myForm').validate();
- AngularJS,如何使UI依赖于哪个字段具有焦点
- 字段选择所有文本,然后在焦点上取消选择它
- 将焦点和光标设置为文本输入字段/字符串 w. Jquery 的末尾
- 当所有表单具有相同的名称和 id 时,选择焦点字段的表单
- 无法阻止输入字段在安卓中获得焦点
- 更改焦点后,输入字段中的文本将消失
- 焦点将放在jquery中的验证日期选择器字段上
- Ace 编辑器将字段焦点放在 Tab 键上
- 输入焦点字段,然后在页面加载时添加类
- 无法将表单输入字段上的 JQuery UI 工具提示限制为仅在单击/焦点事件上显示
- Angularjs 在 ng 单击后将焦点保持在字段上
- 如果用户不更改该选项,请将焦点移动到下一个字段
- 在文本区域字段中设置焦点和突出显示
- jQuery在错误时将焦点重新聚焦到同一输入字段,无法在所有浏览器上运行
- Jquery/Javascript:点击即可查找光标/焦点字段