美文网首页
js选择点击复制文字功能

js选择点击复制文字功能

作者: 丶灰太狼他叔 | 来源:发表于2019-05-31 14:04 被阅读0次

过程:页面增加一个input 或textarea标签。在页面隐藏,值设置为要复制的内容。通过select()方法选择对象,执行浏览器复制命令document.execCommand("Copy")即可。
HTML

        <el-row class="activity-alert">
            <el-row  class="activity-name">
                <el-col :span="12">活动名称:{{activityDetailData.activityName}}</el-col>
                <el-col :span="12" class="activity-url-box">
                    <span>活动地址:{{getActivityUrl}}</span>
                    <textarea :value="getActivityUrl" id="activity-url"></textarea>
                    <el-button class="copy-btn" @click="copyActivityUrl" type="text">复制地址</el-button>
                </el-col>
            </el-row>
            <el-row>活动时间:{{activityDetailData.startTime}} 至 {{activityDetailData.endTime}}</el-row>
        </el-row>

JS

     copyActivityUrl() {
            var e = document.getElementById("activity-url");
            e.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message.success("活动地址已经复制到粘贴板");
        }

相关文章

网友评论

      本文标题:js选择点击复制文字功能

      本文链接:https://www.haomeiwen.com/subject/otiwtctx.html