bootstrap模态框内<input type="text">无法获得焦点怎么办?

大灯灯 发布于 2016/01/29 17:14
阅读 5K+
收藏 0

测试结果是模态框的问题,不在模态框内的弹出框的输入框是可以获得焦点的

在模态框内效果图:

去除模态框的效果图:

有模态框的完整代码:

<!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>


求大神帮看看如何解决!

加载中
0
karsonzhang
karsonzhang

找了很久才定位到问题所在,由于Bootstrap对Modal的窗体外的事件做了处理,而webuiPopover的父级不属于Modal,所以在外部的事件一概都没响应,这才是导致Focus和点击事件都不能响应的原因。

解决办法是在webuiPopover渲染完以后再将将它移动到Modal中去,这样就可以解决了。示例请点击链接查看http://runjs.cn/detail/sguhwwnu

0
蓝水晶飞机
蓝水晶飞机
function onYourPopverOpen() {
// step 1: show popver
// step 2: set focus to input:text
$('#seoTxt').focus();
}



蓝水晶飞机
蓝水晶飞机
https://www.w3.org/TR/html-markup/input.text.html#input.text.attrs.autofocus
0
大灯灯
大灯灯

$("#seoTxt").focus();并不能让其获得焦点。

是尝试过:

<input type="text" id="seoTxt" class="form-control" placeholder="输入搜索内容" onclick="seoFocus()">

function seoFocus(){

    $("#seoTxt").focus();

}

可惜不行。

0
karsonzhang
karsonzhang
应该是dom还没渲染就设置事件导致的,找找你使用的webuipopover插件有没有显示后回调事件,在这个中再调用focus事件
0
大灯灯
大灯灯
怎么知道插件有没有回调事件,jQ新手还不懂这些。
0
大灯灯
大灯灯

感谢大神救急之恩!!!

返回顶部
顶部