H5复制粘贴

Posted 蓿苜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5复制粘贴相关的知识,希望对你有一定的参考价值。

源文案地址

 

使用案例

案例1:复制分享链接

function copyTextToClipboard(text) {
        var textArea = document.createElement("textarea")
        textArea.style.position = ‘fixed‘
        textArea.style.top = 0
        textArea.style.left = 0
        textArea.style.width = ‘2em‘
        textArea.style.height = ‘2em‘
        textArea.style.padding = 0
        textArea.style.border = ‘none‘
        textArea.style.outline = ‘none‘
        textArea.style.boxShadow = ‘none‘
        textArea.style.background = ‘transparent‘
        textArea.value = text
        document.body.appendChild(textArea)
        textArea.select()
        try {
            var msg = document.execCommand(‘copy‘) ? ‘成功‘ : ‘失败‘;
            console.log(‘复制内容 ‘ + msg)
        } catch (err) {
            console.log(‘不能使用这种方法复制内容‘)
        }
        document.body.removeChild(textArea)
    }

  调用:

  <div class="share"><a href="prodetail.html"></a></div>

$(‘.share a‘).on(‘click‘,function(e){
var linkHref="http://"+document.domain+"/"+$(this).attr(‘href‘);
copyTextToClipboard(linkHref);
var tip = document.execCommand(‘copy‘) ? ‘成功‘ : ‘失败‘;
layui.use( ‘layer‘, function() {
var layer = layui.layer;
layer.msg(‘复制‘ + tip)
});
return false;
})

//与原例不同的是 添加了返回结果tip用layer提示

 

以上是关于H5复制粘贴的主要内容,如果未能解决你的问题,请参考以下文章

iOS)我应该在哪里复制和粘贴 facebook XML 片段?

H5复制粘贴

VsCode 代码片段-提升研发效率

Flutter WebView安卓端输入框不能长按粘贴

h5实现点击复制路由信息

Android课程---Android Studio使用小技巧:提取方法代码片段