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

趁我还没死 · 发表于 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>

复制代码

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

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

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

浏览过的版块