Question

打开模态对话框时，我无法复制文本。我的复制文本代码（这是指具有我要复制的值的按钮）：

var dummyLink = $(this).val();
var dummy = $('<input>').val(dummyLink).appendTo('body').select();
document.execCommand('copy');

这个方法适用于我的页面，但在模态对话框中失败 - 没有任何内容被复制。

Answer 1

当元素由于模态而无法获得焦点时，此行不起作用：

document.execCommand('copy');

您可以考虑在感兴趣的按钮/元素和＆＃34; hidden.bs.modal＆＃34;上添加属性。事件，您可以删除添加的属性并继续您的代码。

另一种方法可以基于将输入直接附加到模态的底部/主体。

摘录：

＆＃13;

$('#myModal button').on('click', function (e) {
    $(this).attr('dismissbutton', true);
});
$('#myModal').on('hidden.bs.modal', function (e) {
    var buttonClicked = $(this).find('button[dismissbutton]');
    buttonClicked.removeAttr('dismissbutton');
    setTimeout(function() {
        var dummyLink = buttonClicked.text();
        var dummy = $('<input/>').val(dummyLink).appendTo('body').select();
        document.execCommand('copy');
    }, 100);
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

如果元素是可聚焦的，则可以使用.focus（）

强制聚焦

var dummyLink = $(this).val();
var dummy = $('<input>').val(dummyLink).appendTo('body').select();
dummy.focus();
document.execCommand('copy');

否则你也可以尝试在模态中附加元素，例如：在输入之后直接添加元素而不是正文。这可以防止元素无法聚焦，因为它在后台。

当模态打开时，复制到剪贴板操作不起作用

2 个答案: