js  实现点击复制文本内容


<table>
<tr><td>姓名:<span onclick="copyContent(this);" title="点击复制">张 三</span></td></tr>
<tr><td>姓名:<span onclick="copyContent(this);" title="点击复制">李 四</span></td></tr>
</table> <input id="copy_content" type="text" value=""  style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/> <script type="text/javascript">
function copyContent(ElementObj){
//获取点击的值
var clickContent = ElementObj.innerText;
//获取要赋值的input的元素
var inputElement = document.getElementById("copy_content");
//给input框赋值
inputElement.value = clickContent;
//选中input框的内容
inputElement.select();
// 执行浏览器复制命令
document.execCommand("Copy");
//提示已复制
alter('已复制'); }
</script>

select() 方法只对 <input> 和 <textarea> 有效,所以,要获取到点击的值,放到input标签中,再选中复制。


js 实现点击复制文本内容的更多相关文章

  1. Vue实现点击复制文本内容(原生JS实现)

    需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...

  2. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

  3. 对于pycharm和vscode下,从外部复制文本内容为python字符串内容是会自动加\u202a解决办法

    先来看下这个python3源代码,表面上看没有语法毛病,如果源代码字符串内容是手动复制过来的文本内容,在pycharm和vscode下始终提示: pywintypes.error: (2, 'Shel ...

  4. js复制文本内容到剪贴板

    记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...

  5. 一段js实现复制文本内容到剪切板

    <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementBy ...

  6. js点击复制文本

    // 动态创建 input 元素 var aux = document.createElement("input"); // 获得需要复制的内容 aux.setAttribute( ...

  7. jQuery按钮复制文本内容

    这种方法能保证文本内容被复制到windows剪切板,代码示例是复制url <!doctype html> <html> <head> <meta charse ...

  8. 【Html】Clipboard.js 实现点击复制,剪切板操作

    可以使用cdn 或者直接下载 设置好引用路径(百度云下载) <script type="text/javascript" src="./dist/clipboard ...

  9. js实现点击复制网页内容(基于clipboard.js)

    浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...

随机推荐

  1. PAT 乙级 1045

    题目 题目地址:PAT 乙级 1045 题解 本题的解法比较巧妙,刚开始的试着用暴力求解,果不其然时间超限…… 变换思路,既然对于每个元素来说满足的条件是前小后大,那么对数组排序,对应的位置相等的即为 ...

  2. matlplotlib绘图(二)

    matplotlib基础知识 matpltlib中的基本图表包括的元素 1.x轴和y轴:水平和垂直的轴线 2.x轴和y轴的刻度:刻度标识坐标值的分隔,包括最小刻度和最大刻度 3.x轴和y轴刻度:表示特 ...

  3. pandas的数据联级

    一.索引的堆(stack) 1.行列的转化: Stack():列转行 Unstack():行转列 Stack对应行, 使用小技巧:使用stack()的时候,level等于哪一个,哪一个就消失,出现在行 ...

  4. pycharm安装 suds模块报错:AttributeError: module 'pip' has no attribute 'main'

    需求:安装suds模块 遇到的问题: 一.报错信息:[file][Default Settint]---Project Interpreter 点击 搜索suds安装模块报错 解决:依据上图提示找到C ...

  5. 这一千个Python库,总有你想要的!

    环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具. pyenv – 简单的 Python 版本管理工具. Vex – 可以在虚拟环境中执行命令. v ...

  6. P3369 【模板】普通平衡树FHQtreap

    P3369 [模板]普通平衡树(Treap/SBT) 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询 ...

  7. mysql 索引和查询优化

    对于任何DBMS,索引都是进行优化的最主要的因素.对于少量的数据,没有合适的索引影响不是很大,但是,当随着数据量的增加,性能会急剧下降.如果对多列进行索引(组合索引),列的顺序非常重要,MySQL仅能 ...

  8. spring AOP详解三

    CGLib采用非常底层的字节码技术,可以为一个类创建子类,并在子类中采用方法拦截的结束拦截所有父类方法的调用,并顺势织入横切逻辑.我们采用CGLib技术可以编写一个可以为任何类创建织入横切逻辑代理对象 ...

  9. AWK 用法

     awk 用法:awk ' pattern {action} ' 变量名 含义 ARGC 命令行变元个数 ARGV 命令行变元数组 FILENAME 当前输入文件名 FNR 当前文件中的记录号 FS ...

  10. mq类----1

    MQ.php <?php /** * Created by PhpStorm. * User: brady * Date: 2017/12/6 * Time: 14:42 * * amqp协议操 ...