How to copy a text from a hidden in firefox

Question

How to copy a text from a hidden in firefox

Navigation

#1 by (1 votes)

1

the script is as follows:

<script type="text/javascript">
    $(".cpyBtn").click(function () {
        $.ajax({
            url: '@Url.Action("GetPassword","Credential")',
            type: "get",
            data: {
                idCredential: @Model.ID
            },
            traditional: true,
            cache: false,
            success: function (process) {
                $("#passDecrypted-" + @Model.ID).val(process);
                let copyFrom = document.createElement("textarea");
                document.body.appendChild(copyFrom);
                copyFrom.textContent = $("#passDecrypted-" + @Model.ID).val();
                copyFrom.select();
                document.execCommand("copy");
                copyFrom.remove();
                console.log($("#passDecrypted-" + @Model.ID).val());
            }
        });
    });
</script>

Looking at it with the firefox development tool in console when I click on the icon the following message jumps to me:

document.execCommand ('cut' / 'copy') has been denied because it has not been called from within an event handler generated by the short-running user.

javascript ajax firefox

asked by David Román Rey 04.04.2018 в 13:10

source

1 answer

React - Native does not install .apk insert markers in OpenStreetMaps

score 1 · Answer 1

As indicated in the error document.execCommand('cut'/'copy') it is only allowed to use it (without permissions) in handlers of short events generated by the user (for example, a click). In your case (although the call to ajax is included in a click the context is not the same so it will not leave you). More info

There is the option to give permissions to the browser to allow this but it is not a global solution.

In this SO question They propose several solutions. One of them is to launch the ajax call instead of the click in the mouseenter (saving the value in an input) and then when the click is copied to the clipboard. Obviously this is not very efficient since it will make a call every time the user puts the mouse over the button ... so it would be necessary to evaluate if it is worth it.

I leave this modified example of one of the answers:

$('.list').on('click', function() {  
  	let copyFrom = document.createElement("textarea");
    document.body.appendChild(copyFrom);
    //Obtenemos el valor del hidden
    copyFrom.textContent = $("#hidClip").val();
    copyFrom.select();
    document.execCommand("copy");
    copyFrom.remove();  
});

$('.list').on('mouseenter', function() {
    $.get("http://echo.jsontest.com/uid/12345/value/nuno_bettencourt", function(data) {
        var json = {
            json: JSON.stringify(data),
            delay: 1
        };
        //Guardamos en el hidden el JSON obtenido (o lo que interese de la respuesta)
        $("#hidClip").val(JSON.stringify(data)); 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="list" value="Copiar en el portapapeles"></input>
<input type="text" placeholder="¡Pégame el texto!"/>
<input type="hidden" id="hidClip"/>