如何粘贴剪贴板内容？解决div间复制粘贴无响应问题

两个核心问题导致功能失效： #

• 按钮选择器不匹配：HTML里的粘贴按钮类名是btnpAste（大小写混合），但JS中用的是.btnpaste（全小写），导致点击事件根本没绑定到按钮上。
• 异步方法处理错误：navigator.clipboard.readText()是异步方法，返回的是Promise对象，不能直接赋值给变量后使用，必须通过异步方式获取结果。

修正后的代码： #

JavaScript部分：

$('.btncopy').on('click', function(){
    let a = $('.story').html().trim();
    navigator.clipboard.writeText(a);
    console.log(a);
});
// 修正选择器，改用async/await处理异步
$('.btnpAste').on('click', async function(){
    try {
        let a = await navigator.clipboard.readText();
        console.log(a);
        $('.target').text(a); 
    } catch(err) {
        console.error('读取剪贴板失败:', err);
    }
});

关键说明：

1. 把粘贴按钮的选择器改成.btnpAste，和HTML中的类名完全匹配。
2. 给点击事件的回调函数加上async关键字，用await等待剪贴板读取完成，同时用try/catch捕获可能的权限错误或读取失败情况。

完整可运行代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btncopy'>COPY</button>
<button class='btnpAste'>PASTE</button>
<div class='story'><p>lorem ipsum</p></div>
<br>
<div class='target'></div>

<style>
.story, .target{min-height:25px; background:orange;}
</style>

<script>
$('.btncopy').on('click', function(){
    let a = $('.story').html().trim();
    navigator.clipboard.writeText(a);
    console.log(a);
});

$('.btnpAste').on('click', async function(){
    try {
        let a = await navigator.clipboard.readText();
        console.log(a);
        $('.target').text(a); 
    } catch(err) {
        console.error('读取剪贴板失败:', err);
    }
});
</script>

修改后，点击复制按钮会将.story的HTML内容写入剪贴板，点击粘贴按钮即可读取内容并显示到.target中。

内容的提问来源于stack exchange，提问作者provance