javascript - 显示弹出窗口时专注于输入字段(引导弹出窗口)

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