关注输入字段时弹出窗口中显示（引导酥料饼）

我有HTML机身采用此按钮：关注输入字段时弹出窗口中显示（引导酥料饼）

<div tabindex="0" class="image-copy-to-clipboard image-copy-to-clipboard-icon" role="button" data-placement="bottom" data-toggle="popover" data-trigger="focus" data-container="body"> 
    <div class="head hide">Press Ctrl+C to copy user info</div> 
    <div class="content hide"> 
     <input id="userInfo" type="text" placeholder="" value="#{{user.Id}} : {{user.Name}}" autofocus="autofocus" /> 
    </div> 
</div>

而这个脚本，以它的工作原理：

$('[data-toggle="popover"]').popover({ 
    html: true, 
    title: function() { 
     return $(this).parent().find('.head').html(); 
    }, 
    content: function() { 
     return $(this).parent().find('.content').html(); 
    } 
}); 

$('#userInfo').focus(function (event) { 
    var self = $(this); 
    setTimeout(function() { 
     self.select(); 
    }, 100); 
}); 

$(document).on('click', function(event) { 
    if (event.target.nodeName == 'HTML') { 
     $('.popover.fade').hide().remove(); 
    } 
});

当显示弹出窗口，我需要专注于输入字段并且必须选择所有文本。我尝试了很多问题，但没有正常工作。请帮我解决这个问题。

JSFiddle

来源

2015-07-20 HUSTLIN

感谢所有，结果是https://jsfiddle.net/HUSTLIN/e9yqyas1/1/ – HUSTLIN

我修改jazZRo提供的触发功能，并得到它的工作就像这样：

$('[data-toggle="popover"]').on('shown.bs.popover', function() { 
    $('.popover').find("#userInfo").focus().select(); 
});

看一看在JSFiddle here

另外请注意，我从HTML代码中删除的data-trigger="focus"，让你的JQuery代码关闭popover单击文档时。

来源

2015-07-20 08:17:14

谢谢，它解决了我的问题！ :) – HUSTLIN

@HUSTLIN在使用前请检查多个浏览器。例如IE有困难。 – jazZRo

期运用引导弹出窗口：

<div class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body…</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

来源

2015-07-20 08:05:19

您需要观看shown.bs.popover事件触发。这将触发时酥料饼已开通：

替换：

$('#userInfo').focus(function (event) { 
    ...

有了：

$('[data-toggle="popover"]').popover({...}).on('shown.bs.popover', function() { 
    $('#userInfo').focus(); 
});

编辑：这仍然没有奏效问题是因为动态插入的内容的。 See this updated fiddle。

我链接了方法，因为事件需要在同一个jQuery对象上。同样为了得到这个工作，popover需要手动触发，否则popover会在焦点后立即关闭。

来源

2015-07-20 08:10:28 jazZRo

仍然无法正常工作https://jsfiddle.net/HUSTLIN/b991st3m/4/ – HUSTLIN

关注输入字段时弹出窗口中显示（引导酥料饼）

回答

相关问题