Question

反映javascript输入值的输入值反映javascript输入值的值反映javascript输入值的值反映javascript输入的值

<div id="goodContent{{ entity.id}}" onclick="copyToClipboard();" style="display:none;">
                            {{ pdf_yolu }}
                        </div>
                        <div class="btn btn-default" id="clickCopy">Kopyala</div>


document.getElementById("clickCopy").onclick = function() {
            copyToClipboard(document.getElementById("goodContent{{ entity.id}}"));
        };

        function copyToClipboard(e) {
            var tempItem = document.createElement('input');

            tempItem.setAttribute('type','text');
            tempItem.setAttribute('display','none');

            let content = e;
            if (e instanceof HTMLElement) {
                content = e.innerHTML;
            }

            tempItem.setAttribute('value',content);
            document.body.appendChild(tempItem);

            tempItem.select();
            document.execCommand('Copy');

            tempItem.parentElement.removeChild(tempItem);
        }

Answer 1

这不是Symfony的问题，因为Symfony不会在Web浏览器上执行其自己的代码，因此您需要在其中运行“复制到剪贴板”功能。（您应该从问题中删除Symfony标记。）这完全是JavaScript。

请考虑使用诸如ClipboardJS之类的库来执行此操作。我可以确认它在基于Symfony的项目的前端模板上可用。

在我的情况下，我的表有很多行，需要每行的第二列可以通过按钮复制。我希望该按钮出现在第一列中。这是我写的脚本：

请记住，我也使用其他前端库，例如sprintf，jQuery，jQuery UI，Bootstrap 4和FontAwesome。不过，您应该可以对此进行调整。

jQuery(document).ready(function($){

    $('table').find('tr.js-copyable').each(function(k, v){

        var $tr = $(v).first();
        if ($tr.length != 1) {
            return;
        }

        var $th = $tr.find('th').first();
        if ($th.length != 1) {
            return;
        }

        var $td = $tr.find('td').first();
        if ($td.length != 1) {
            return;
        }

        var value = $td.text();
        if (typeof value != "string" || (value = value.trim()).length < 1) {
            return;
        }

        var tdTooltip = function(text, icon){

            if (typeof text != "string" || (text = text.trim()).length < 1) {
                return;
            }

            if (typeof icon != "string" || (icon = icon.trim()).length < 1) {
                icon = "";
            }

            $td.tooltip('dispose');

            $td.tooltip({
                html: true,
                title: sprintf("<i class=\"fa %s\"></i><span>%s</span>", icon, text),
                trigger: "manual",
                placement: "left",
            });

            $td.tooltip('show');
            setTimeout(function(){
                $td.tooltip('hide');
            }, 2000);

        };

        var $copyButton = $('<button class="btn btn-info js-copy js-tooltip" title="Copy to clipboard"><i class="fa fa-copy"></i></button>');

        var clipboard = new ClipboardJS($copyButton[0], {
            text: function(trigger){
                $copyButton.tooltip('hide');
                return value;
            },
        });

        clipboard.on('success', function(e){
            tdTooltip("Copied!", "fa-check-circle");
        });

        clipboard.on('error', function(e){
            tdTooltip("Failed to copy.", "fa-times-circle");
        });

        $copyButton.appendTo($th);

    });

});

上面没有一点关于Symfony的事。所有这些都是JavaScript和相关的前端库。

使用Symfony复制到剪贴板

1 个答案: