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; ...
随机推荐
- JavaIO学习:序列化流
对象流 1.涉及到的类 ObjectInputStream 和 ObjectOutputStream 用于存储和读取基本数据类型数据或对象的处理流. 2.作用 ObjectOutputStream:内 ...
- MVC+Ninject+三层架构+代码生成 -- 总结(五、Ninject)
1.在寫邏輯層前,需要弄好反轉控制,因框架沒有寫接口,所以Ninject只負責返回當前實例,有點類似共享設計模式. public sealed class IOCHelper { private st ...
- .NET 导入Excel服务器报未在本地计算机上注册 Microsoft.Jet.Oledb.4.0提供程序
代码已经在本地运行正常,发布到服务器后,一直报未在本地计算机上注册 Microsoft.Jet.Oledb.4.0提供程序, 解决办法:读取EXCEL文件时最好使用ACE方式,jet对于高版本系统的服 ...
- 在<a></a>标签中如何调用javaScript脚本
在日常工作总会遇到在<a>标签中执行js代码的情况 现在做一个总结,希望对大家有一个帮助. 1.a href="javascript:js_method();" 这是我 ...
- Asp.net MVC企业级开发(04)---SignalR消息推送
Asp.net SignalR是微软为实现实时通信而开发的一个类库.可以适用于以下场景: 聊天室,如在线客服系统,IM系统等 股票价格实时更新 消息的推送服务 游戏中人物位置的实时推送 SignalR ...
- Spring扩展点之Aware接口族
引言 Spring中提供了各种Aware接口,方便从上下文中获取当前的运行环境,比较常见的几个子接口有:BeanFactoryAware,BeanNameAware,ApplicationContex ...
- ES6 变量与解构(二)
一.变量的声明与使用 [测试示例需要在node环境中测试,浏览器环境下并不完全兼容ES6代码]ES6中可以使用 {} 来包含任意一段代码,被 {} 包裹的内容称为一个代码块(局部作用域) let关键字 ...
- OKGo vs RxHttpUtils ...
jeasonlzy/okhttp-OkGohttps://github.com/jeasonlzy/okhttp-OkGo Android OkGo基本操作https://www.jianshu.co ...
- iperf3 网络测试工具
Iperf3 是一个网络性能测试工具.Iperf可以测试最大TCP和UDP带宽性能,具有多种参数和UDP特性,可以根据需要调整,可以报告带宽.延迟抖动和数据包丢失.对于每个测试,它都会报告带宽,丢包和 ...
- SQL Server 修改表结构(转载)
SQL Server 修改表结构 本文链接:https://blog.csdn.net/petezh/article/details/81744374 查看指定表结构 exec sp_help Rep ...