Working "copy To Clipboard" Function Doesn't Work When Called In Bootstrap Modal
Solution 1:
document.execCommand('copy'); functionality depends on trusted events. If a event needs to be trusted then the target element should also have a proper focus.
Try setting the focus on the textElement and set it to the modal after you remove it from the text element. this should solve the problem
functioncopytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
textField.focus(); //SET FOCUS on the TEXTFIELDdocument.execCommand('copy');
textField.remove();
console.log('should have copied ' + text);
ajax-error.focus(); //SET FOCUS BACK to MODAL
}
Solution 2:
In short: as the modal has
tabindex="-1"
the.focus()
will only work in Chrome. For a cross-browser solution, you have to insert the textarea into the DOM as a descendant of the modal.
The key is, that the textarea has to be the document.activeElement
when the copy command is executed. In other words, it has to have focus. This could be achieved by calling .focus()
on it, however in your specific case the click event happens within a modal with a tabindex="-1"
already in focus. At the time of writing in this scenario the .focus()
method will work in Chrome only. In other browsers tabindex="-1"
will prevent the textarea from getting focused, unless it is a descendant node of the modal.
Therefore the solution below creates the textarea when it always can have focus, as a sibling of the clicked element:
$(document).ready(function(){
$(document).on('click', '#copy-btn', function(){
copytext('dferenc tested this', this);
})
});
functioncopytext(text, context) {
var textField = document.createElement('textarea');
textField.innerText = text;
if (context) {
context.parentNode.insertBefore(textField, context);
} else {
document.body.appendChild(textField);
}
textField.select();
document.execCommand('copy');
// Let `.remove()` also work with older IEs
textField.parentNode.removeChild(textField);
console.log('should have copied ' + text);
}
Post a Comment for "Working "copy To Clipboard" Function Doesn't Work When Called In Bootstrap Modal"