超简单的jquery 点击文本复制文本

news/2024/7/10 23:16:29 标签: jquery, css, html

有点仿蓝湖的点击代码就复制的功能,直接点击你想复制的文本,就可以复制成功了

html:

<ul class="info-list">
   <li>
     <div class="info">
	     <em>1</em>
	     <span class="link-addr"title="123333333">123333333</span>
     </div>
   </li>
   <span class="copy-success">复制成功</span>
</ul>

html" title=css>css:

.copy-success{
    display: none;
    padding: 6px 12px;
    text-align: center;
    background-color: #fff;
    color: #333;
    border-radius: 4px;
    position: fixed;
    top: 10px;
    left: 50%;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
}

js:

<script>
   $('.link-addr').click(function () {
        $('#codeText').val($(this).text())
        console.log($('#codeText').val(),8)
        $('#codeText').select()
        console.log($('#codeText').select(),9)
        document.execCommand("Copy");
        //复制成功后提示文字
        var y = $(this).offset().top - 32,
            x = $(this).offset().left + 45
        $('.copy-success').html" title=css>css({
            'display': 'block',
            'top': y,
            'left': x
        });
        setTimeout("$('.copy-success').html" title=css>css('display', 'none')", 1500);
    })
</script>
这是第一种,这种有一点不是很好,就是页面上不需要出现输入框,如果直接用html" title=css>css隐藏的话复制就不起作用了,所以有了第二种方法
如下:
<script>
        $(".link-addr").click(function () {
            var copy_text = $(this).text();//需要复制的内容
            var y = $(this).offset().top - 32,
                x = $(this).offset().left + 45;
            copyText(copy_text);
            //复制成功后提示文字
            $('.copy-success').html" title=css>css({
                'display': 'block',
                'top': y,
                'left': x
            });
            setTimeout("$('.copy-success').html" title=css>css('display', 'none')", 1500);
        });

        function copyText(text) {
            var oInput = document.createElement('input');
            oInput.value = text;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.className = 'oInput';
            oInput.style.display = 'none';
        }
    </script>

http://www.niftyadmin.cn/n/1867640.html

相关文章

Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

异常信息 由于语法过时&#xff0c;导致此部分内容不生效 WARNING in ./src/app/pages/login/login.component.scss (Emitted value instead of an instance of Error) autoprefixer: G:\project\CX_Project\HomePage\src\app\pages\login\login.component.scss:294:2: Gradien…

vue 不在同一处(不是同一个页面)的数据使用(数据传输)

vue 不在同一处&#xff08;不是同一个页面&#xff09;的数据使用&#xff08;数据传输&#xff09; 整理下最近在做vue项目时遇到的几个关于数据传输的问题&#xff1a; 有的时候我们在同一个页面想要调用不同的组件&#xff0c;不同的组件可能只是结构不太一样&#xff0c;…

SpringCloud--zuul和oauth2

文章目录zuuloauth2资源配置授权服务web策略用户UserDetails服务配置文件此篇我将介绍 将zuul 层 和 oauth2 进行分别作为两个服务处理。 zuul 进行路由分发和进行关联oauth2服务 Pom需要的依赖 <dependency><groupId>org.springframework.cloud</groupId>&l…

vue + element(前后端) 学习总结(一)

准备工作 工具安装和环境搭建 ## node.js## npm## mongodb数据库 主要记录一下mongodb的安装和配置(mac版) ## 首先去mongodb的官网下载&#xff1a;[https://www.mongodb.com/download-center] ## 下载解压后重命名为mongodb,接着打开mongodb&#xff0c;在mongodb下新建一个…

Kubernetes--阿里云服务安装

由于官网给的地址为google地址&#xff0c;被墙。因此采用阿里的镜像执行安装。安装方式传送门 传送门 Kubernetes 阿里云服务器安装方式 https://yq.aliyun.com/articles/626118

vue + element(前后端) 学习总结 (二)

初始化项目 admin&#xff08;管理端&#xff09; server &#xff08;服务端&#xff09; web &#xff08;移动端&#xff09; 在项目文件下&#xff08;demo_project&#xff09;新建各端项目文件 在demo_project文件路径下&#xff0c;输入命令&#xff1a;mkdir serv…

vue + element(前后端) 学习总结 (三)

后台管理界面的搭建 cd admin 进入后台管理项目路径下 npm run serve 启动项目 vue add element 安装element-ui vue add router 安装路由 去element 官网 找到后台管理界面 复制代码 在admin > src > views > 新建Main.vue文件 粘贴element代码 在router.js 里…

Mac--jenv管理jdk版本

文章目录mac进行安装基本操作方式mac进行安装 进行安装 brew install jenv -y配置环境变量 echo export PATH"$HOME/.jenv/bin:$PATH" >> ~/.bash_profile echo eval "$(jenv init -)" >> ~/.bash_profile基本操作方式 查看当前以增加的jd…