美文网首页
Js复制文本功能

Js复制文本功能

作者: 怪兽君MT | 来源:发表于2018-12-04 18:41 被阅读0次

    参考:
    1.https://www.cnblogs.com/tylerdonet/p/4533782.html
    2.https://www.cnblogs.com/wisewrong/p/7473978.html

    平时工作上会遇到一键复制文本、链接等需求,这就需要点击某个按钮,触发js事件把指定的文本复制到粘贴板上,以便其他地方使用。

    注意:这些方法只在webkit内核浏览器测试过,并没有做过其他浏览器的兼容,如果需要兼容其他浏览器,请自行搜索。

    目前会在以下三种情况下实现:

    1、已经选中p/span等标签的文本,需要复制选中文本

    <script type="text/javascript">
    function copyTxt() {
      document.execCommand("Copy"); // 这句就可以把已选文本复制
    }
    </script>
    

    2、实现点击按钮,复制文本框中的的内容

    <script type="text/javascript">
    function copyUrl() {
      let url = document.querySelector('input');
      url.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      alert("已复制好,可贴粘。");
    }
    </script>
    

    3、没选中,但想要复制指定元素的文本。
    思路:在文本标签中,绝对定位一个透明的input(这个input不能用type=hidden或者display、visibility去隐藏,会获取不到文本的),然后点击复制按钮,去获取这个Input的文本

    <style>
    input {position: absolute; top: 0; left: 0; opacity: 0; z-index: -10;}
    </style>
    
    <script type="text/javascript">
    function copyTxt() {
      let url = document.querySelector('input');
      url.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      alert("已复制好,可贴粘。");
    }
    </script>
    

    相关文章

      网友评论

          本文标题:Js复制文本功能

          本文链接:https://www.haomeiwen.com/subject/ykkvcqtx.html