Question

我尝试构建一些建议，作为一种通用的方式来帮助用户将某些东西放到剪贴板中，即，弹出一个模式对话框并选择正确的文本，并邀请用户按Ctrl-C / Opt-C。我大部分都在那里，但我似乎无法专注于输入框。 onclick（）前往这个简单的函数：

function clipboard()
{
var tag = $("#tag").text();
$("#clipboardModal").modal('show');
$("#copyTag").val(tag);
$("#copyTag")[0].focus();
$("#copyTag").select();
}

我已经发现$（x）.focus（）没有设置焦点，你需要做$（x）.get（0）.focus（）或$（x）[0]。 focus（）做实际聚焦。但是，我从未关注输入字段。 Chrome会立即将焦点集中在单击调用剪贴板（）的按钮上。 Explorer将焦点放在X关闭按钮之前的模态对话框上。我可以选择几次，我在输入框中。但在任何一种情况下，我都没有得到我想要的东西。（注意：上面的select（）是无关紧要的，因为它永远不会在那里得到焦点。）为了完整性，这里是html：

<!-- START: clipboardModal - modal dialog for selecting gadgets -->
<div id="clipboardModal" class="modal fade fuelux">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Your Tag</h4>
            </div>
            <div class="modal-body" id="gadgetChangeID">
                <p>Press Ctrl-C/Opt-C to copy to clipboard</p>
            </div>
            <input id="copyTag" type="text" />
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- END: clipboardModal -->

我可以如何将焦点集中到输入字段？

Answer 1

这有用吗？

function clipboard(){
    var tag = $("#tag").text();
    $("#clipboardModal").modal('show');

    $('#clipboardModal').on('shown.bs.modal', function (e) {
        $("#copyTag").val(tag);
        $("#copyTag").focus();
        $("#copyTag").select();
    });
}

仅在实际显示模态后才关注输入文本。

显示的代码甚至可以在函数

之外

$('#clipboardModal').on('shown.bs.modal', function (e) {
    $("#copyTag").val(tag);
    $("#copyTag").focus();
    $("#copyTag").select();
});
function clipboard(){
    var tag = $("#tag").text();
    $("#clipboardModal").modal('show');
}

又一个“焦点（）将不起作用”

1 个答案: