前端js实现复制弹出复制成功可兼容苹果

最新推荐文章于 2022-03-06 04:27:33 发布

原创最新推荐文章于 2022-03-06 04:27:33 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript在浏览器环境中实现复制功能，并确保在苹果设备上兼容，当复制成功时能弹出提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    .pop_tip{
        position: absolute;
        top: 10%;
        left: 50%;
        transform:translateX(-50%);
        background:#eee ;
        padding:25px 50px;
        font-size:16px;
        display: none;
        z-index: 1000;
    }
</style>

<script language="javascript">   function copytext() {
     var Url2 = $("#tar_text").text();
     var oInput = document.createElement('input');
     oInput.value = Url2;
     document.body.appendChild(oInput);
     // oInput.select();
     selectText(oInput)
     document.execCommand("Copy");
     oInput.className = 'oInput';
     oInput.style.display = 'none';
     alert('复制成功！');
    // var tip ="<div class='pop_tip' >复制成功！</div>"
    // $ ('.pop_tip').show ().delay (3000).fadeOut ();
  }
 function selectText(oInput) {
     if(oInput.createTextRange) {//ie
         oInput.select();
       }else{//firefox/chrome
          oInput.setSelectionRange(0, oInput.value.length);
          oInput.focus();
       }
   }</script>

<div><span id="tar_text" >111</span>&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="btn_copy" style="background: #0db37f; color: white; width: 60px; height: 30px; text-align:center;"  onclick="copytext()" value="复制"/>  </div>