SoFunction
Updated on 2025-04-10

Front-end jQuery copy text to clipboard function implementation

Function description:

Click the "Copy" button to get the text under child element () under parent element () of the current click event

HTML code

<div class="chats">  
     
    <div class="block">  
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="width: 90%; margin: 0.2rem auto; box-sizing:border-box; display:flex;flex-direction:row;">  
            <!-- Omit some code -->  
            <div  style="flex: 0.9; line-height: 0.45rem; margin: 0 0.1rem; background: #F5F5F5; padding: 0.1rem; border-radius:5px">  
                <p>Hello! It seems like you've entered a string of "nnnn." If you have any questions or need assistance</p>  
            </div>  
        </div>  
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">  
            <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  class="copy-link">copy</a>  
        </div>  
    </div>  

    <div class="block">  
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="width: 90%; margin: 0.2rem auto; box-sizing:border-box; display:flex;flex-direction:row;">  
            <!-- Omit some code -->  
            <div  style="flex: 0.9; line-height: 0.45rem; margin: 0 0.1rem; background: #F5F5F5; padding: 0.1rem; border-radius:5px">  
                <p>Hello!  please feel free to ask, and I'll be happy to help.</p>  
            </div>  
        </div>  
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">  
            <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  class="copy-link">copy</a>  
        </div>  
    </div>  
    
</div>  

Js code

    ('DOMContentLoaded', function() {  
	    // Add click event listening to all .block parent elements, and use event delegate to handle .copy-link clicks	    ('.chats').addEventListener('click', function(e) {  
	        // Check if the clicked element is what we want.copy-link	        if (('.copy-link')) {  
	            // Find the .block where the .copy-link you clicked is located	            var block = ('.block');  
	            // Find #textToCopy in .block (Note: ID should be unique, here is only an example) var textToCopy = ('#textToCopy p');	            // Get text content	            var text =  || ;  
	            // (text)

	            // Copy using API (modern browser)		        if () {  
		            (text).then(function() {  
		                ('Copy successfully');  
		            }, function(err) {  
		                ('Copy failed:', err);  
		            });  
		        } else {  
		            // For browsers that do not support the Clipboard API, old methods can be used (such as creating a temporary textarea)		            var textarea = ('textarea');  
		             = text;  
		            (textarea);  
		            ();  
		            ('copy');  
		            (textarea);  
		            ('Copyed to clipboard');  
		        } 
	        }  
	    });  
	}); 

Summarize

This is the article about the implementation of front-end jQuery copy text to clipboard function. For more related content on jQuery copy text to clipboard, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!