先上效果,由于截图,高亮蓝色成了灰色    参考这位大佬的   https://www.cnblogs.com/dreambin/p/9046999.html

HTML 部分

<form name=test>  
<input type="button" id="cardList" value="点此全选复制" onclick="javascript:selectAll('test.select1')"> <textarea name="select1" rows=3 cols=46 onclick="selectAll('test.select1')">可以全选</textarea>
</form>

javaScript 部分

//实现全选功能
function selectAll(theField) { var tempval = eval("document." + theField) //这里主要是要得到dom document.test.select1 tempval.select() // 选取文本域的内容 this.copy(tempval.value)
} //实现复制功能
/*
Evevt.clipboardData 对象 clipboardData是JavaScript剪切板对象,该对象提供了3个常用方法:   clearData(): clipboardData对象从剪切板删除一种或多种数据格式(一个参数:数据类型)   getData(): clipboardData对象从剪切板获取指定格式的数据(一个参数:数据类型)   setData(): clipboardData对象赋予指定格式的数据(两个参数:数据类型,要赋予的值)   *数据类型一般为“"text/plain" ”
*/
function copy(str) {
var save = function (e) {
e.clipboardData.setData('text/plain', str); //clipboardData对象
e.preventDefault(); //阻止默认行为
}
document.addEventListener('copy', save);
document.execCommand("copy"); //使文档处于可编辑状态,否则无效
} document.getElementById('cardList').addEventListener('click', function (ev) {
copy(ev.target.innerText)
}) selectAll('test.select1')

JS 实现复制、全选文本的更多相关文章

  1. 移动端html5页面长按实现高亮全选文本内容的兼容解决方式

    近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...

  2. js EasyUI前台 全选的实现

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWcAAAEQCAIAAADj/SKjAAAgAElEQVR4nO1dz48ry1W+/5N3swaFEP ...

  3. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  4. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  5. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

  6. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  7. js中的全选,不选,和反选按钮的设定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  9. js解决checkbox全选和反选的问题

    function SelectAll() { var checkboxs=document.getElementsByName("chk_list"); for (var i=0; ...

随机推荐

  1. 【计算机组成原理】中央处理器CPU

    一.CPU的功能和基本结构 1.功能 当用计算机解决某个问题是,我们首先必须为他编写程序,程序是一个指令序列,这个序列明确告诉计算机应该执行什么操作,在什么地方找到用来操作的数据,一旦把程序装入内存器 ...

  2. Linux : Nginx相关

    nginx安装参考链接: https://www.cnblogs.com/kaid/p/7640723.html 自定义编译目录: https://blog.csdn.net/ainuser/arti ...

  3. 【51nod1355】斐波那契的最小公倍数(min-max容斥)

    [51nod1355]斐波那契的最小公倍数(min-max容斥) 题面 51nod 题解 显然直接算还是没法算的,所以继续考虑\(min-max\)容斥计算. \[lcm(S)=\prod_{T\su ...

  4. pack URI

    WPF使用pack URI语法寻找资源. URI负责搜索如下位置的资源: 当前程序集 引用的程序集 相对于程序集的某个位置 应用程序的源站点 pack URI的格式:pack://机构/路径 机构指定 ...

  5. NET/Regex 处理连续空格

    问题: 就是一个字符串呀,一个字符串,里面的话有一个空格,有可能有连续空格,你遇到连续空格,把这个连续空格变成一个空格,一个空格地不处理. 代码: /// <summary> /// 处理 ...

  6. elasticsearch原理学习

    用es也差不多一年左右了,但是都是只会用,底层做了什么一窍不通,没有核心竞争力,循序渐进,一个一个攻破,理解的多了,读的多了,自然能力就上去了,es底层是基于lucene的,所以今天先从lucene下 ...

  7. Spring扩展点之Aware接口族

    引言 Spring中提供了各种Aware接口,方便从上下文中获取当前的运行环境,比较常见的几个子接口有:BeanFactoryAware,BeanNameAware,ApplicationContex ...

  8. git操作:查看分支、删除本地分支和远程分支

    1.查看本地分支:git branch 2.查看远程分支:git branch -r 或 git branch --remote 3.查看本地和远程的所有分支:git branch -a 4.删除本地 ...

  9. 【python】ConnectionRefusedError: [WinError 10061]

    在测试接口过程中,由于各种原因服务端返回:10061,由于目标计算机积极拒绝,无法连接. 图一 图二 造成这种返回结果的可能原因:1.代码问题2.本机代理设置问题3.本地防火墙或者安全卫士之类的设置问 ...

  10. APS中生产计划排程模块的基本原理

    高级计划系统(APS)作为ERP和MES的补充,用于协调物流.开发瓶颈资源和保证交货日期. APS包括需求和供应计划.运输和生产计划排程等各种供应链计划模块,本文主要介绍APS中生产计划排程模块的基本 ...