關注輸入字段時彈出窗口中顯示（引導酥料餅）

Question

我有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

Answer 1

我修改jazZRo提供的觸發功能，並得到它的工作就像這樣：

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

看一看在JSFiddle here

另外請注意，我從HTML代碼中刪除的data-trigger="focus"，讓你的JQuery代碼關閉popover單擊文檔時。

Answer 2

期運用引導彈出窗口：

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

Answer 3

您需要觀看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會在焦點後立即關閉。