I am trying to create a button that will assign a class to a div that wrap a bunch of html elements for the purpose of manually selecting and copying what is selected on the browser "ctrl-c".
I have created the button and when clicked it does assign the class but when I trigger a click event it does not select the text in the browser. However, if "really" click with my mouse anywhere it does select everything. The issue seems to be my triggered click is not doing the same as clicking for real.
.select-all {
-webkit-touch-callout: all; /* iOS Safari */
-webkit-user-select: all; /* Safari */
-khtml-user-select: all; /* Konqueror HTML */
-moz-user-select: all; /* Firefox */
-ms-user-select: all; /* Internet Explorer/Edge */
user-select: all; /* Chrome and Opera */
}
$(".btn-copy-all").click(function() {
$("#copyall").addClass('select-all').trigger('click');
});
<button class="btn-copy-all">COPY</button>
<div id="copyall">
~A bunch of HTML elements~
</div>
The class is added when I click the button. The triggered click event doesn't do anything. I want it to select all the text on screen the same way it does when I click with the mouse after that class is added. I plan to execute the copy command to copy everything selected and then remove the class and deselect everything once it is copied to clipboard. I am trying to do it this way because I want to copy the visible text to screen only and the formatting that the browser will copy in vs copying all the code directly inside the div because I do not want the code only the text with how the browser copies page formatting. Any ideas on how to manually get my click to trigger the actual selection of text or a different way to do this altogether?
