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; ...
随机推荐
- java中的7个位运算运算符
位运算指的是针对整数的二进制进行的位移操作. 位运算提供比算术运算更高的效率,但是位运算的代码可读性较差,建议所有使用位运算的地方写上注释. Java中提供7个位运算符用于位运算. 左移(<&l ...
- Git的使用--如何安装和使用 github,让小白不在那么白 (一)(超详解)
简介 刚开始写了关于如何将本地代码上传到github上,但是有些小伙伴们不清楚如何安装Git,这一篇就给小伙伴们普及一下Git的安装和使用.适合刚开始用git的小白,大神或者大佬请绕道. 实际项目开发 ...
- [4]Hexo静态博客背景及界面显示优化配置
示例预览:我的主页 前提预设: [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 [1]hexo+github搭建个人博客的过程记录 背景图片添加 ...
- Windows下使用grep命令
一.可供选择的工具列表: Grep for Windows – 轻量级选项 GNU utilities for Win32 – 本地港口 Cash – 重量轻,建于Node.js之上 Cygwin – ...
- Java匹马行天下之JavaSE核心技术——工具类
Java匹马行天之JavaSE核心技术——工具类 一.Object类 java.lang.ObjectObject类是所有类直接或间接的父类 常用的方法: toString():以字符串形式返回对象的 ...
- 使用 Spring Boot 构建 RESTful API
1. 使用 Idea 创建 Spring Initializer 项目 在创建项目的对话框中添加 Web 和 Lombok,或者建立项目后在 pom.xml 中添加依赖: <dependency ...
- WPF控件介绍(2)
上一章讲到了布局.这点就有点类似建筑设计.第一步是出图纸.整体的结构.而第二步就是堆砌, 建筑学里面也会有很多描述, 例如砖头,水泥.玻璃.瓷板.而在WPF中, 这一切的基础也就是控件.用于填充结构的 ...
- Activity + 基础UI
目录 Activity + 基础UI 1. 返回键退出进入应用: 2. home键以后 3. home键退出切换字体 二:AndroidManifest配置theme改变UI效果 三:UI 报错: A ...
- Excel分列,Excel 列拆分,Excel根据分隔符号拆分某列
解决方案: https://zhidao.baidu.com/question/572807483.html 步骤:数据--分列--下一步--其它---下一步-- 注意的此操作会覆盖当前列和后n列(根 ...
- C# Net 计算周(可正推和逆推)
C# Net 计算周(可正推和逆推) 拷贝代码(方法): /// <summary> /// 计算周 /// </summary> /// <param name=&qu ...