bootstrap模态框内<input type="text">无法获得焦点怎么办？
测试结果是模态框的问题，不在模态框内的弹出框的输入框是可以获得焦点的
在模态框内效果图：
去除模态框的效果图：
有模态框的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale =1,minimum-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/jquery.webui-popover.min.css" />
</head>
<style type="text/css">
.form-control{
height: 34px;
font-size: 14px;
}
</style>
<body>
<div class="modal fade" id="inFromUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="input-group">
<div class="input-group-addon">ico</div>
<input type="text" class="form-control" id="ShopCode" placeholder="公司职员">
<span class="input-group-btn">
<a href="#" class="btn btn-default show-pop-table">弹出框</a>
</span>
</div>
<div id="tableContent" style="display:none;">
<div class="input-group">
<input type="text" id="seoTxt" class="form-control" placeholder="输入搜索内容" onclick="seoFocus()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<table class="table table-hover">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>01</td>
<td>name</td>
<td>男</td>
<td>21</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/jquery.webui-popover.min.js" ></script>
<script type="text/javascript">
$('#inFromUser').modal({
show: true
});
$(function(){
var settings = {
//trigger:'click',
//title:'请选择：',
//content:'<p>This is webui popover demo.</p><p>just enjoy it and have fun !</p>',
//width:320,
//multi:true,
//closeable:false,
//style:'',
//delay:300,
//padding:true
};
function initPopover(){
var tableContent = $('#tableContent').html(),
tableSettings = {content:tableContent,
width:300
};
$('a.show-pop-table').webuiPopover('destroy').webuiPopover($.extend({},settings,tableSettings));
}
initPopover();
});
</script>
</html>
求大神帮看看如何解决！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
感谢大神救急之恩！！！
怎么知道插件有没有回调事件，jQ新手还不懂这些。
应该是dom还没渲染就设置事件导致的，找找你使用的webuipopover插件有没有显示后回调事件，在这个中再调用focus事件
$("#seoTxt").focus();并不能让其获得焦点。
是尝试过：
<input type="text" id="seoTxt" class="form-control" placeholder="输入搜索内容" onclick="seoFocus()">
function seoFocus(){
$("#seoTxt").focus();
}
可惜不行。
function onYourPopverOpen() { // step 1: show popver // step 2: set focus to input:text $('#seoTxt').focus(); }找了很久才定位到问题所在，由于Bootstrap对Modal的窗体外的事件做了处理，而webuiPopover的父级不属于Modal，所以在外部的事件一概都没响应，这才是导致Focus和点击事件都不能响应的原因。
解决办法是在webuiPopover渲染完以后再将将它移动到Modal中去，这样就可以解决了。示例请点击链接查看http://runjs.cn/detail/sguhwwnu