利用js复制文本框里面的内容到剪切板,并且隐藏文本框

简介: 利用js复制文本框里面的内容到剪切板,并且隐藏文本框

在页面中有时需要用到复制这个功能,提高用户体验。而内容是放在div中展示的不可以让用户修改。就相当于页面中有两个重复的内容,一个是用才展示给用户的,一个是用来复制的,而这个复制的用户看不到内容。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.btnSel {
  border: 0px;
  border-radius: 5px;
  background-color: #9f9fff;
  color: white;
}
.contentsCls {
  border: 0px;
  width: 1px;
  height: 1px;
  resize: none;
}
</style>
<body>
  <input class='btnSel' id="btnId" style='font-size: 11px;' type='button'
    onClick='jsCopy();' value='复制数据' />
    <!-- <div id="id1">
    asdf
    asdf
    </div> -->
  <div>
    <textarea id="contents" class="contentsCls"
      style="border: 0px; width: 0px; height: 0px; resize: none;" col="1"
      row="1" readonly="readonly">
3
1.1 1.01
-9 0.98
333 78.888</textarea>
  </div>
</body>
<script type="text/javascript">
  var flag = 1;
  function jsCopy() {
    /* var a=document.getElementById("id1").innerText;
    document.getElementById("contents").value = a; */
    var e = document.getElementById("contents"); //对象是contents   
    e.select(); //选择对象   
    tag = document.execCommand("Copy"); //执行浏览器复制命令  
    if (tag) {
      document.getElementById("btnId").value = "复制成功";
    }
    if (flag == 1) {
      flag = 2;
      document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#00CC66";
    } else {
      flag = 1;
      document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#9f9fff";
    }
  }
</script>
</html>
相关文章
|
6月前
|
前端开发 JavaScript Java
JavaScript复制内容到剪切板 带格式的复制
JavaScript复制内容到剪切板 带格式的复制
108 0
|
存储 JSON JavaScript
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
探索基于pdf.js-dist开发的纯Javascript PDF批注插件库,支持保存、导出、导入和管理PDF文件中的批注。多个功能模块为您提供丰富的PDF注释体验。
583 0
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
|
3月前
|
JavaScript 前端开发
使用js对文本框设置字数限制
使用js对文本框设置字数限制
66 0
|
5月前
|
JavaScript
【干货】JS 限制input文本框输入
【干货】JS 限制input文本框输入
|
6月前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
195 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
6月前
|
JavaScript 前端开发 索引
用JavaScript精巧地实现文本框的粘贴功能:一次成功的尝试
前言:本文实际是用js移动控制光标的位置!解决了网上没有可靠教程的现状 废话连篇 默认情况对一个文本框粘贴,应该会有这样的功能: 粘贴文本后,光标不会回到所有文本的最后位置,而是在粘贴的文本之后 将选中的文字替换成粘贴的文本
79 1
|
6月前
|
JavaScript 前端开发 API
【JavaScript】复制文本到剪切板
Clipboard API是现代浏览器提供的一组JavaScript接口,用于访问和操作用户剪贴板中的内容。它提供了异步读取和写入剪贴板的功能,可以处理多种类型的数据,如文本、图像等。通过使用navigator.clipboard对象,开发者可以调用相关方法来读取和写入剪贴板中的内容。
99 0
|
XML JavaScript 前端开发
具备spring环境的测试头注解;xml 规则;JavaScript:改变 HTML 内容案例
具备spring环境的测试头注解 具备spring环境的测试头注解 test
142 1
具备spring环境的测试头注解;xml 规则;JavaScript:改变 HTML 内容案例
|
JavaScript
js 正则表达式获取括号里面的内容
js 正则表达式获取括号里面的内容
js 正则表达式获取括号里面的内容
|
JavaScript 前端开发
带你彻底学会JS DOM技术之删除,复制,替换元素
参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。 1或true:表示复制元素本身以及复制该元素下的所有子元素。 0或false:表示仅仅复制元素本身,不复制该元素下的子元素。
313 0
带你彻底学会JS DOM技术之删除,复制,替换元素