当前位置: 首页 > news >正文

一键复制产品信息到剪贴板

在页面上点击按钮,把部分商品信息复制到剪贴板,可以任意粘贴到需要的地方。主要用到的方法为:setSelectionRange()方法;document.execCommand("copy")

<div><p>产品名称:<span class="js-p-title">XXXXXXXXXXXXXXXXXXXXXXXXX</span></p><p>产品英文名称:<span class="js-en-title">eeeeeeeeeeeee</span></p><p>产品数量:<span class="js-cunt">eeeeeeeeeeeee</span></p><p>型号:<span class="size_span">W1</span><span class="size_span">W2</span><span class="size_span">W3</span></p><p>价格:<span class="price_span">10元</span><span class="price_span">20元</span><span class="price_span">30元</span></p></div><div style="text-align: center;"><input id="copy_text_a" type="button" value="一键复制" onclick="copytext()" style="margin-top: 30px; background-color: #2ebac0; color: #fff; width: 150px; height: 50px; border: 0 none; border-radius: 5px;"/><br><!-- 赋值给textarea --><textarea id="copytext" style="display:none" ></textarea></div>
function copytext(){$('#copytext').show();var msg="产品名称:  "+$('.js-p-title').text().trim();msg=msg+"\r\n英文名称:	"+$(".js-en-title").text().trim();msg=msg+"\r\n产品数量:	"+$(".js-cunt").text().trim();let size = [], price = []$.each($('.size_span'), (index,item)=>{size.push($('.size_span').eq(index).text().trim())price.push($('.price_span').eq(index).text().trim())});msg=msg+"\r\n产品规格:	"+size.join('/');msg=msg+"\r\n产品价格:	"+price.join('/');msg=msg+"\r\n产品链接:	"+window.location.href;//$('#copytext').val(msg);$('#copytext').select();$('#copytext')[0].setSelectionRange(0,msg.length);document.execCommand("copy");$('#copytext').hide();$('#copy_text_a').val("复制成功");setTimeout(function () {$('#copy_text_a').val("一键复制产品信息");}, 3000);}

http://www.xdnf.cn/news/1276435.html

相关文章:

  • Kafka消费者相关原理
  • K8s DaemonSet 详解
  • es-drager-blog
  • 安全生产基础知识(一)
  • ThreadLocal的原理是什么,使用场景有哪些?
  • 状态机浅析
  • Linux操作系统从入门到实战(十八)在Linux里面怎么查看进程
  • Pico+unity VR入门开发超详细笔记2025
  • SpringBoot实现文件上传
  • 一些js数组去重的实现算法
  • 故障诊断 | VMD-CNN-BiLSTM西储大学轴承故障诊断附MATLAB代码
  • MyBatis进阶:动态SQL、多表查询、分页查询
  • openresty-lua-redis案例
  • Python 的列表 list 和元组 tuple 有啥本质区别?啥时候用谁更合适?
  • Ubuntu 安装 Kibana
  • 旅行者1号无线电工作频段
  • MyBatisPlus插件原理
  • MVCC和日志
  • 音视频学习(五十一):AAC编码器
  • C4.5算法:增益率(Gain Ratio)
  • 嵌入式第二十四课!!linux应用软件编程与文件操作!!!
  • Rust 实战四 | Traui2+Vue3+Rspack 开发桌面应用:通配符掩码计算器
  • JAVA+AI简化开发操作
  • Java集合中的 LinkedList
  • 每日任务day0810:小小勇者成长记之武器精炼
  • node.js 学习笔记3 HTTP
  • Django @login_required实现登陆认证
  • C/C++内存管理函数模板
  • 小明的魔法地图:迷宫探险智慧(记忆性递归)
  • 【0基础3ds Max】主工具栏介绍(下)