JS 实现复制、全选文本

先上效果,由于截图,高亮蓝色成了灰色 参考这位大佬的 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 实现复制、全选文本的更多相关文章
- 移动端html5页面长按实现高亮全选文本内容的兼容解决方式
近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...
- js EasyUI前台 全选的实现
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWcAAAEQCAIAAADj/SKjAAAgAElEQVR4nO1dz48ry1W+/5N3swaFEP ...
- 原生js的联动全选
开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...
- JS对checkbox全选和取消全选
需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...
- 原生JS实现购物车全选多选按钮功能
对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...
- JS小案例--全选和全不选列表功能的实现
纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- js中的全选,不选,和反选按钮的设定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- js解决checkbox全选和反选的问题
function SelectAll() { var checkboxs=document.getElementsByName("chk_list"); for (var i=0; ...
随机推荐
- Linux 安装Redis4.0.8【yum安装】
.下载yum源 yum install epel-release2.安装redisyum install redis3.启动redis # 启动redis service redis start # ...
- wget下载阿里云oss的文件报错403
问题 在实际工作中,我们为了方便,会将一些脚本储存在云端(阿里云OSS),这样方便我们使用和下载,但是在实际的使用过程中,我们会遇到一些问题. 示例链接:https://djxlsp.oss-cn-s ...
- IDEA 调试 JAVA ConcurrentLinkedQueue
调试ConcurrentLinkedQueue 源码 poll() 方法时 ,出现了比较奇怪的现象,当时队列里有两个元素,如下截图, 但执行完 p.casItem(item, null)后,出现了令人 ...
- 如何让SQL语句不执行默认排序,而是按照in语句的顺序返回结果
Oracle: ')order by instr('111,222,333,444,555,666',order_id); Mysql: ') order by instr(',111,222,333 ...
- Windows 10 蓝牙管理页面"添加蓝牙或其他设备"选项点击无响应的解决方案
解决方案1(简单,但不解决根本问题): 通过"控制面板→设备和打印机→添加设备"进行添加. 解决方案2: 造成这种现象的原因应该是因为启用了 Administrator 账户,在其 ...
- c/c++程序中内存区划分
转自:http://wenzongliang.iteye.com/blog/1866629 操作系统启动程序时会加载程序代码到内存(叫程序的代码区),然后创建进程PCB为进程分配内存资源(数据区,32 ...
- 如果再聘请一位会css的美工,那要你还有什么用?
老板正为网站不好看而烦恼. 会议结束后. 我对我的前辈说:要是能找个会css美工就好了! 前辈说:如果再聘请一位会css的美工,那要你还有什么用? 我一时语塞. 后来回答:我可以专心后端代码,可以写 ...
- Python之request模块-基础用法
Request模块参考中文手册:https://requests.readthedocs.io/zh_CN/latest/ Request模块 1.查看pip已装包(模块)的安装信息(模块的路径.版本 ...
- h5表单亲测
Document 下载进度: 标签. 牛奶 面包 男 女 one two three 按钮 搜索 请输入搜索内容 加密强度 用户名 Email 密码 年龄 身高 生日 这一系列是很酷的一个类型,完全解 ...
- terminator
terminator 能够实现linux 终端的分屏显示. 安装 sudo add-apt-repository ppa:gnome-terminator sudoapt-get update sud ...