复制到剪贴板消息不可见

Answer 1

父级

overflow-hidden

正在剪切其边界框之外的任何内容。由于消息位于外部，因此永远不可见。删除

overflow-hidden

类会使复制消息可见：

const outputTab = 'Foo';
const copymsg = document.getElementById('copy-msg');

async function copyContent() {
    //this is an api used to copy something on clipboard, it will return promise
    //jo bhi outputtab pr show hoga vo sab dikhega

    try {
        await navigator.clipboard.writeText(outputTab.value);
        copymsg.classList.remove('hidden');
        copymsg.classList.add('opacity-100');
        copymsg.innerText='Copied!!'
        console.log("copy succesfull")
        
    } catch (error) {
        copymsg.innerText='failed to copy!'
        
    }
    // to make copy span visible
    //this makes any css made in copybtn visible for sometimes
    
    

    //to make copt span hide
    setTimeout(()=>{
        copymsg.classList.add('hidden');
        copymsg.classList.add('hidden');
    },2000);

}

document.getElementById('copy-btn').addEventListener('click', copyContent);

<script src="https://cdn.tailwindcss.com/3.4.15"></script>

<!-- Output Display with Animated Border -->
<div class="relative mb-6 flex items-center rounded-lg p-[1.8px] border border-gray-300">
  <!-- Animated Border Layer -->
  <div class="animate-rotate absolute inset-0 h-full w-full rounded-lg bg-[conic-gradient(#0e85df_20deg,transparent_120deg)]"></div>

  <!-- Inner Password Output Container -->
  <div class="relative z-20 w-full">
    <input type="text" id="password-output" readonly placeholder="Your Password" class="w-full py-3 px-4 bg-gray-100 rounded-lg text-blue-600 focus:outline-none focus:ring-red-600 font-semibold font-sans text-xl" />

    <!-- Copy Button -->
    <button id="copy-btn" aria-label="Copy Password" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-blue-500 focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2z" />
      </svg>
    </button>

    <!-- Copy Message -->
    <span id="copy-msg" class="absolute left-2 -bottom-6 text-sm text-green-500 hidden opacity-0 transition-opacity duration-500">Copied!</span>
  </div>
</div>