利用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>
相关文章
|
3月前
|
前端开发 JavaScript Java
JavaScript复制内容到剪切板 带格式的复制
JavaScript复制内容到剪切板 带格式的复制
|
3月前
|
JavaScript 前端开发 API
【JavaScript】复制文本到剪切板
Clipboard API是现代浏览器提供的一组JavaScript接口,用于访问和操作用户剪贴板中的内容。它提供了异步读取和写入剪贴板的功能,可以处理多种类型的数据,如文本、图像等。通过使用navigator.clipboard对象,开发者可以调用相关方法来读取和写入剪贴板中的内容。
37 0
|
4月前
|
JavaScript 前端开发 索引
用JavaScript精巧地实现文本框的粘贴功能:一次成功的尝试
前言:本文实际是用js移动控制光标的位置!解决了网上没有可靠教程的现状 废话连篇 默认情况对一个文本框粘贴,应该会有这样的功能: 粘贴文本后,光标不会回到所有文本的最后位置,而是在粘贴的文本之后 将选中的文字替换成粘贴的文本
43 1
|
前端开发 JavaScript
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
142 0
|
JavaScript
js 正则表达式获取括号里面的内容
js 正则表达式获取括号里面的内容
js 正则表达式获取括号里面的内容
|
XML JavaScript 前端开发
具备spring环境的测试头注解;xml 规则;JavaScript:改变 HTML 内容案例
具备spring环境的测试头注解 具备spring环境的测试头注解 test
119 1
具备spring环境的测试头注解;xml 规则;JavaScript:改变 HTML 内容案例
|
JavaScript 前端开发
带你彻底学会JS DOM技术之删除,复制,替换元素
参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。 1或true:表示复制元素本身以及复制该元素下的所有子元素。 0或false:表示仅仅复制元素本身,不复制该元素下的子元素。
241 0
带你彻底学会JS DOM技术之删除,复制,替换元素
|
JavaScript Android开发
用JS删除webView的内容
用JS删除webView的内容
150 0
用JS删除webView的内容
|
JavaScript
一段js实现复制文本内容到剪切板
一段js实现复制文本内容到剪切板 该方法兼容所有浏览器~
78 0
|
Web App开发 JavaScript 前端开发
小技巧!前端JS实现过滤指定内容~
小技巧!前端JS实现过滤指定内容~