文本点击复制和长按复制及图片长按的功能

最新推荐文章于 2024-08-03 15:44:55 发布

原创最新推荐文章于 2024-08-03 15:44:55 发布 · 8.4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何在网页中实现长按图片事件，包括文本和图片的长按复制功能。通过html和js代码段，展示了具体的实现方法。

<body >
<div style="width:100vw">
        <div class="wrapper" style="width:100%;position: absolute;z-index: -1;top: 0;">
                <!-- 指定要复制的内容 -->
                <p id="text" class="wxh wuk_weixin">123</p>
                <textarea id="input" onclick="copyText()"  readonly="readonly"></textarea>
        </div>
       
        <div style="background: gainsboro;height: 100vh;width: 100;">
          <div >长按复制: <span class="wxh wuk_weixin" oncopy="copyText()">123</span></div>
          <button onclick="copyText()">点击复制</button>
        </div>

</div>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".wxh").text("1234")
});

function copyText() {
    var text = document.getElementById("text").innerText;
    var input = document.getElementById("input");

    // 把要复制的文本复制给input
    input.value = text; 
    // 选中文本
    input.select(); 
    // 复制链接或文本
    document.execCommand("copy");
    alert("已经复制成功")

}
</script>
</body>

点击复制功能VueClipboard
https://www.mrcdh.cn/pages/c4ccd7/
https://blog.csdn.net/qq_41648452/article/details/106343273

长按图片事件

html部分

  <!-- 长按事件 -->
          <div id="touchArea">
                <img src="./img/load.gif" style="height:300px;width:100px " @touchstart="start" @touchmove="move" @touchend="end">
          </div>

js部分

var timeOutEvent=0;  
$(function(){  
    $("#touchArea").on({  
        touchstart: function(e){  
            timeOutEvent = setTimeout("longPress()",500);  
            e.preventDefault();  
        },  
        touchmove: function(){  
                    clearTimeout(timeOutEvent);   
                timeOutEvent = 0;   
        },  
        touchend: function(){  
            clearTimeout(timeOutEvent);  
            if(timeOutEvent!=0){   
                alert("你这是点击，不是长按");   
            }   
            return false;   
        }  
    })  
});  
  
   
function longPress(){   
    timeOutEvent = 0;   
    alert("长按事件触发发");   
}