快捷導(dǎo)航

前端jQuery復(fù)制文本到剪貼板功能實現(xiàn)

更新時間：2025年01月23日 09:48:47 作者：下頁、再停留

這篇文章主要介紹了前端如何使用jQuery實現(xiàn)點擊“復(fù)制”按鈕時,獲取并復(fù)制父級元素下子元素的文本HTML代碼的功能,文中給出了實現(xiàn)的詳細(xì)代碼,需要的朋友可以參考下

功能說明：

點擊“復(fù)制”按鈕，獲取當(dāng)前點擊事件的父級元素（id="block"）下子元素（id="textToCopy"）下的文本

HTML代碼

<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;">  
            <!-- 省略部分代碼 -->  
            <div id="textToCopy" 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">復(fù)制</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;">  
            <!-- 省略部分代碼 -->  
            <div id="textToCopy" 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">復(fù)制</a>  
        </div>  
    </div>  
    
</div>

Js代碼

    document.addEventListener('DOMContentLoaded', function() {  
	    // 為所有 .block 的父元素添加點擊事件監(jiān)聽，使用事件委托處理 .copy-link 的點擊  
	    document.querySelector('.chats').addEventListener('click', function(e) {  
	        // 檢查點擊的元素是否是我們想要的 .copy-link  
	        if (e.target.matches('.copy-link')) {  
	            // 找到點擊的 .copy-link 所在的 .block  
	            var block = e.target.closest('.block');  
	            // 在 .block 中找到 #textToCopy（注意：ID應(yīng)唯一，這里僅為示例）  
	            var textToCopy = block.querySelector('#textToCopy p');  
	            // 獲取文本內(nèi)容  
	            var text = textToCopy.textContent || textToCopy.innerText;  
	            // console.log(text)

	            // 使用navigator.clipboard API進(jìn)行復(fù)制（現(xiàn)代瀏覽器）  
		        if (navigator.clipboard) {  
		            navigator.clipboard.writeText(text).then(function() {  
		                console.log('復(fù)制成功');  
		            }, function(err) {  
		                console.error('復(fù)制失敗:', err);  
		            });  
		        } else {  
		            // 對于不支持Clipboard API的瀏覽器，可以使用舊方法（例如創(chuàng)建一個臨時的textarea）  
		            var textarea = document.createElement('textarea');  
		            textarea.value = text;  
		            document.body.appendChild(textarea);  
		            textarea.select();  
		            document.execCommand('copy');  
		            document.body.removeChild(textarea);  
		            console.log('已復(fù)制到剪貼板');  
		        } 
	        }  
	    });  
	});