先上效果,由于截图,高亮蓝色成了灰色    参考这位大佬的   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. Java基础之UDP协议和TCP协议简介及简单案例的实现

    写在前面的废话:马上要找工作了,做了一年的.net ,到要找工作了发现没几个大公司招聘.net工程师,真是坑爹呀.哎,java就java吧,咱从头开始学呗,啥也不说了,玩命撸吧,我真可怜啊. 摘要: ...

  2. 自己对Thread的一些看法;

    Thread thread= new Thread(new ThreadStart(name);     与 Thread thread= new Thread(name); thread.star( ...

  3. C#实现UrlEncode (URL编码)

    public static string UrlEncode(string str) { StringBuilder sb = new StringBuilder(); byte[] byStr = ...

  4. Centos7 python虚拟环境virtualenv和virtualenvwrapper简单介绍

    我的系统版本是 [root@localhost ~]# cat /etc/os-release 我的Python版本是 [root@localhost ~]# python3 -V 关于如何安装Pyt ...

  5. python--进程初识详解

    进程:通俗理解一个运行的程序或者软件,进程是操作系统资源分配的基本单位 1.1.导入进程模块 import multiprocessing 1.2.Process进程类的语法结构如下: Process ...

  6. Java 9新特性

    1.jdk 目录结构 JDK9 具体目录结构如下所示: bin: 该目录包含所有的命令. conf: 包含用户可以编辑的配置文件,例如以前位于 jre\lib 目录中的.properties 和 .p ...

  7. [转]Java游戏引擎

    JME(jMonkey Engine): JME是一个高性能的3D图形API,采用LWJGL作为底层支持.它的后续版本将支持JOGL.JME和Java 3D具有类似的场景结构,开发者必须以树状方式组织 ...

  8. new的原理及实现

    new的过程 // new运算的过程 /** * 1.创建一个空对象: * 2.该空对象的原型指向构造函数(链接原型):将构造函数的 prototype 赋值给对象的 __proto__属性: * 3 ...

  9. javascript getElementsByClassName扩展函数

    代码: function getElementsByClassName(){ if(!arguments[0]){return []};//未指定任何参数,直接返回 var args=argument ...

  10. 类似hover的css伪类注解

    a:link { font-size: 14pt; text-decoration: underline; color: blue; } /*设置a对象在未被访问前的样式表属性 .*/ a:hover ...