angular 实现一键复制

最新推荐文章于 2024-05-25 09:39:27 发布

原创最新推荐文章于 2024-05-25 09:39:27 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #web

web 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在Angular应用中实现一键复制功能。通过在页面上创建一个不可见的输入框，并利用JavaScript来控制其值的复制过程。该方法适用于需要快速让用户复制特定文本的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实还是拿js实现的只是在angular中实现的

demo.html

<div>
        <!-- 写一个input框 且不能隐藏 通过样式挪到屏幕外 -->
        <input type="text" name="selectCopy" id="selectCopy" ng-model="copyvalue" style="position: absolute;left:-100px;bottom:-100px">
    </div>
    
    <button ng-click="doCopy('123');">一键复制</button>

controller.js

//点击复制
 $scope.doCopy = function(info){
      document.getElementById('selectCopy').value = info;//给input赋值
      document.getElementById('selectCopy').select(); //选中赋值过的input 
      var tag = document.execCommand("Copy"); //执行复制
      if(tag){  
          alert("复制成功。")  
      }; 
 }