javascript - saveas - execcommand usecss
execCommand(''copy'') no funciona en la devolución de llamada Ajax/XHR? (2)
(Probado con Chrome 44)
Comportamiento deseado : Realice la solicitud de XHR, coloque el resultado en el área de texto, seleccione texto y cópielo en el portapapeles.
Comportamiento real : en una solicitud XHR exitosa, coloca el resultado en el área de texto y lo selecciona, pero no puede copiar el resultado al portapapeles. Pero si inicio la copia fuera de la devolución de llamada XHR, funciona.
Ejemplo de página html:
var selectAndCopy = function() {
// Select text
var cutTextarea = document.querySelector(''#textarea'');
cutTextarea.select();
// Execute copy
var successful = document.execCommand(''copy'');
var msg = successful ? ''successful'' : ''unsuccessful'';
console.log(''Cutting text command was '' + msg);
};
var fetchCopyButton = document.querySelector(''#fetch_copy'');
fetchCopyButton.addEventListener(''click'', function(event) {
var xhr = new XMLHttpRequest();
xhr.open(''get'', ''http://httpbin.org/ip'');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// Set text
var textarea = document.querySelector(''#textarea'');
textarea.value = xhr.responseText;
selectAndCopy();
}
}
};
xhr.send();
});
var copyButton = document.querySelector(''#copy'');
copyButton.addEventListener(''click'', function(event) {
selectAndCopy();
});
<html>
<head>
</head>
<body>
<p>
<textarea id="textarea">Hello, I''m some text!</textarea>
</p>
<p>
<button id="fetch_copy">Fetch Data and Copy Textarea</button>
<button id="copy">Copy Textarea</button>
</p>
</body>
</html>
Si presiona el botón "Obtener datos y copiar área de texto", los datos se obtienen con éxito pero no se copian. Si presiona el botón "Copiar Textarea", el texto se copiará como se esperaba. He intentado muchas combinaciones de solicitud / copia para intentar que funcione, pero fue en vano (incluso programáticamente presionando el botón copiar después de obtener datos). ¿Alguien sabe lo que está pasando aquí? ¿Es esto una característica de seguridad o algo?
No quiero que el usuario tenga que presionar dos botones para buscar y copiar si es posible.
Solo puede activar una copia en el portapapeles del sistema en respuesta directa a una acción de usuario de confianza, como un evento de click .
Spec: http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis
Si hace que XMLHttpRequest sea sincrónico, esto funcionará. Solo tiene que agregar false como el tercer parámetro a xhr.open(...) :
var selectAndCopy = function() {
// Select text
var cutTextarea = document.querySelector(''#textarea'');
cutTextarea.select();
// Execute copy
var successful = document.execCommand(''copy'');
var msg = successful ? ''successful'' : ''unsuccessful'';
console.log(''Cutting text command was '' + msg);
};
var fetchCopyButton = document.querySelector(''#fetch_copy'');
fetchCopyButton.addEventListener(''click'', function(event) {
var xhr = new XMLHttpRequest();
xhr.open(''get'', ''http://httpbin.org/ip'', false);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// Set text
var textarea = document.querySelector(''#textarea'');
textarea.value = xhr.responseText;
selectAndCopy();
}
}
};
xhr.send();
});
var copyButton = document.querySelector(''#copy'');
copyButton.addEventListener(''click'', function(event) {
selectAndCopy();
});
<html>
<head>
</head>
<body>
<p>
<textarea id="textarea">Hello, I''m some text!</textarea>
</p>
<p>
<button id="fetch_copy">Fetch Data and Copy Textarea</button>
<button id="copy">Copy Textarea</button>
</p>
</body>
</html>