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

使用Bootstrap弹出窗口：

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

你需要观看要发射的shown.bs.popover事件。它会在弹出窗口打开时触发：

替换：

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

使用：

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

编辑：这个问题仍然无法解决，因为动态插入内容。 See this updated fiddle

我链接了这些方法，因为事件需要在同一个jQuery对象上。另外，要使这个工作，需要手动触发弹出窗口，否则弹出窗口会在焦点后立即关闭。

Answer 3

我修改了jazZRo提供的触发器功能并使其正常工作：

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

查看JSFiddle here

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

显示弹出窗口时关注输入字段（bootstrap popover）

3 个答案: