使用js的document.execCommand(“Copy“) 方法实现点击复制功能

点击复制

html代码

<input type="text" class="form-control" id="video_url" name="video_url"                                 value="Product_video/20200212HH352120200212HH3521.mp4"                                       onclick="copyUrl('oss_video_url')"   readonly/>
<input type="hidden" id="oss_video_url" name="oss_video_url"                           value="https://www.qipa250.com/Product_video/20200212HH352120200212HH3521.mp4"/>                            

js代码

   function copyUrl(id) {
        var url = document.getElementById(id);
        //如果有值才复制
        if (url.value) {
            url.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("已复制好，可贴粘!");
        }
    }

点击文本框复制，提示 已复制好，可贴粘 发现根本没有任何链接

不能实现的原因：

input框不能有disabled属性
根据第一条扩展，input的width || height 不能为0；
input框不能有hidden属性

解决方案

因为业务逻辑上input框确实不能编辑和显示，使用另一个input框展示相同的数据，然后设置opacity=0；这样就不可见了，
但是新增的input还是占有空间，所以再来个粗暴的样式 position: absolute；这样就脱离了文档流；

js代码不变，修改html如下：

<input type="text" style="opacity: 0;position: absolute;" id="oss_video_url" name="oss_video_url"                                              value="https://www.qipa250.com/Product_video/20200212HH352120200212HH3521.mp4"/>

就可以实现点击文本框复制链接地址了，快去试试吧