如何实现一个按钮点一下就能让用户复制到文本内容

趁我还没死 · 发表于 2021-1-29 20:48:44

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

比如这样：一个</button id="copy"> 点我复制<button>。

我就想实现这样一个功能用户点了那个按钮，，，用户鼠标右键点“粘贴”的时候就是我想让他复制的文本。

就是类似于手机上那个验证码发过来短信上会有一个“ 复制验证码”的按钮你点了你就成功复制了那个验证码。

谢谢🐟c大佬，求，帮忙解决问题万分感谢。

kogawananari · 发表于 2021-1-29 23:32:06

你需要一个绝对定位到屏幕之外的input标签假设这个标签叫dataTag
当cope按钮触发时只需要：
dataTag.value = 你需要复制的内容
dataTag.select()
document.execCommand("copy")

附带一个我以前写的项目的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>medication dumps</title>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
        <style>
            html,body{
                font-size:16px !important;
                overflow:hidden
            }
            .form-group{
                margin-bottom:10px
            }

            input{
                font-size:16px !important;
            }
            .control-label{
                text-align:right;
                padding-top:7px
            }
            h1{
                font-size:28px !important;
            }
        </style>
    </head>
    <body ondragstart="return false">
        <div id="app">
            <div class="page-header col-md-6 col-md-offset-3" style="margin-top:0;margin-bottom:0">
                <h1>药房<small>medication dumps</small></h1>
            </div>
            <div class="row">
                <div class="panel panel-default col-md-12 col-lg-6 col-lg-offset-3" >
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">姓名</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="姓名" @blur="test('姓名',$event)" placeholder="简体中文">
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">性别</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input type="radio" name="Sex" value="男" v-model="性别"/>    男     <input type="radio" name="Sex" value="女" v-model="性别"/>    女
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">年龄</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="年龄" @blur="test('年龄',$event)" placeholder="1到3位数字">
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">身份证</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="身份证号码" @blur="test('身份证号码',$event)" placeholder="15或18位数字">
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">诊断</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="诊断">
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">商品名称</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="商品名称" placeholder="自编码未知时必填">
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">自编码</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="商品条码" @blur="test('商品条码',$event)" placeholder="9位数字（见小票）">
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">数量</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="数量" @blur="test('数量',$event)" placeholder="不带单位">
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-xs-4 col-sm-3 control-label" for="formGroupInputSmall">用法用量</label>
                                <div class="col-xs-8 col-sm-6">
                                    <input class="form-control" type="text" v-model="用法用量">
                                </div>
                            </div>
                        </form>
                        <hr style="margin:5px 0" />
                        <div class="row">
                        <input ref="dataTag" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/>
                        <button type="button" class="btn btn-warning col-xs-4 col-xs-offset-1" @click="clear()">清空</button>
                        <button type="button" class="btn btn-primary col-xs-4 col-xs-offset-2" @click="copy()">复制</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            class Storage{
                constructor(name,initdata){
                    this.name = name
                    this.initdata = initdata
                }
                get(){
                    return JSON.parse(localStorage.getItem(this.name)) || this.initdata
                }
                set(data){
                    localStorage.setItem(this.name, JSON.stringify(data))
                }
                static clear(){
                    localStorage.clear()
                }
            }
            const initdata = '{"姓名":"","年龄":"","性别":"男","身份证号码":"","诊断":"","商品名称":"","商品条码":"","数量":"","用法用量":""}'
            const re = {
                姓名:'^[\\u4e00-\\u9fa5]*,
                年龄:'^[0-9]{1,3},
                身份证号码:'(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)',
                商品条码:'[0-9]{9}',
                数量:'^[0-9]*,
            }
            const sp = "        "
            const vm = new Vue({
                el: '#app',
                data: function(){
                    return JSON.parse(initdata)
                },
                methods: {
                    copy: function(){
                        let dataTag = this.$refs.dataTag
                        st.set(this.$data)
                        dataTag.value = sp + JSON.stringify(this.$data).replace(/,/g,"，") + sp
                        dataTag.select()
                        document.execCommand("copy")
                        Swal.fire({
                            position: 'center',
                            type: 'success',
                            title: '复制完成',
                            showConfirmButton: false,
                            timer: 1500
                        })
                    },
                    init: function(){
                        let data = st.get()
                        for(let i in data){
                            this.$data[i] = data[i]
                        }
                    },
                    clear:function(){
                        Storage.clear()
                        this.init()
                    },
                    test:function(type,e){
                        if(this[type]===""){return}
                        if(this[type].match(new RegExp(re[type],"g"))===null){
                            Swal.fire({
                                position: 'center',
                                type: 'warning',
                                title: type + '填写不合要求',
                                showConfirmButton: false,
                                timer: 1000
                            })
                            //setTimeout(function(){e.target.focus()},1000)
                        }
                    }
                },
                created() {
                    st = new Storage('medication',JSON.parse(initdata))
                    let data = st.get()
                    for(let i in data){
                        this.$data[i] = data[i]
                    }
                }
            });
        </script>
    </body>
</html>

账号		自动登录	找回密码
密码			立即注册