有一需求,点击按钮要将某个值复制到剪贴板。

第一种,代码如下:

     <div cols="20" id="biao1">12345678</div>
<input type="button" onClick="copyUrl2()" value="点击复制代码" /> function copyUrl2() {
var Url2 = document.getElementById("biao1").innerText;
var oInput = document.createElement("input");
oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = "oInput";
oInput.style.display = "none";
alert("复制成功");
}

第二种,代码如下:

     <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl3()" value="点击复制代码" /> function copyUrl3() {
var Url2 = document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}

网上找到了这两种写法,经过实践,切实可行。

js将内容复制到剪贴板的更多相关文章

  1. js 将内容复制到剪贴板

      js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...

  2. ZeroclipboardJS+flash实现将内容复制到剪贴板实例

    Zeroclipboard 的实现原理 Zeroclipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash ...

  3. javascript 将内容复制到剪贴板

      javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...

  4. js 将内容复制到剪切板上

    clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...

  5. Xshell选中的同时把内容复制到剪贴板(还可以设置设置文本分隔符)

    1.设置对话框 工具 -> 选项 -> 键盘和鼠标 -> 将选定的文本自动复制到剪贴板 2.贴图如下 2.1.打开设置对话框 2.2.设置键盘鼠标,左键复制 2.3.右键粘贴 作者: ...

  6. Xshell选中的同时把内容复制到剪贴板

    1.设置对话框 工具 -> 选项 -> 键盘和鼠标 -> 将选定的文本自动复制到剪贴板 2.贴图如下 2.1.打开设置对话框 2.2.设置键盘鼠标,左键复制

  7. javascript : 点击按钮,把某标签中的内容复制到剪贴板

    需求如题. 静态页面如下. 需要的库:jquery(不用应该也能做). 浏览器:PC chrome 68 Mobile MIUI9.5(Android 7) <p>1.用电脑打开网址:&l ...

  8. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  9. js/jQuery实现复制到剪贴板功能,兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

随机推荐

  1. Spring-AOP-配置实现五大通知

    码云: xml配置方法:https://gitee.com/MarkPolaris/spring_aop_1 注解配置方法:https://gitee.com/MarkPolaris/spring-e ...

  2. Codeforces Round #598 (Div. 3) F. Equalizing Two Strings 构造

    F. Equalizing Two Strings You are given two strings s and t both of length n and both consisting of ...

  3. win7 架设php环境运行H5游戏的坑坑坑坑

    解决办法: 修改php.ini  文件 session.save_path = "D:/H5_Game" 指向所用的根目录 环境 windows7 x64  + php7.0.8

  4. 【linux运维】linux系统上忘记密码如何操作

    目录 红帽系统忘记密码操作 红帽系统设置ip,主机名 centos系统忘记密码操作 一.红帽系统忘记密码操作 1)再出现以下界面后按键盘e键 2)进入以下界面后,再次按e键 3)使用上下键选择第2项或 ...

  5. idea插件备份

  6. MyEclipse构建maven项目报错

    直接上图: 这里有三种方案: 1.检查jdk版本:最好换成1.8版本 项目右键-->build path-->configure build Path; 1.2  点击 libraries ...

  7. 登录注册案例(Servlet+JSP+Maven)

    项目案例模板之登录注册的实现 案例演示 案例代码 设计表 pom.xml  <dependencies>  <dependency>    <groupId>jun ...

  8. springmvc学习笔记三:整合JDBC,简单案例==数据库事务配置(切面)

    package cn.itcast.bean; import org.springframework.jdbc.core.PreparedStatementSetter; public class U ...

  9. crm-全总结

    1.什么是crm 客户关系管理系统 ,以客户数据为中心建立一个信息收集.管理.分析和利用的信息系统 2.业务逻辑相关使用crm-app完成 1)路由项目分发到crm-app (别名 传参 命名空间) ...

  10. css精灵图&字体图标

    精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...