js实现一键复制

在公司项目开发时，需要完成一键复制的功能，页面如下：

该功能的输入框是无法获取焦点的，点击复制按钮可一键复制输入框的值，代码如下：

<div>
    HTTP<br>
    <a-input type="text" id="downloadSrc1" disabled 
        style="width: 200px;" :value="httpUrlToRepo"
    />
    <a-button @click="copy('downloadSrc1')">复制</a-button><br>
</div>
<div style="margin-top: 15px">
    SSH<br>
    <a-input type="text" id="downloadSrc2" 
        style="width: 200px;" disabled :value="sshUrlToRepo"
    />
    <a-button @click="copy('downloadSrc2')">复制</a-button>
</div>

const copy = function (content){

    let copyText = document.getElementById(content);
    /* 选择复制内容 */
    copyText.select();

    navigator.clipboard.writeText(copyText.value);
    message.success("已复制")
}

该方法可以实现一键复制功能，点击按钮调用copy方法获取输入框的值。使用navigator.clipboard.writeText( )复制输入框的值，运行和测试都没有问题，但是项目上线以后报错，错误信息为不能识别writeText，查询以后了解到是线上线下环境问题。

然后决定更换方法，使用document.execCommand('copy')，但是，尽管console.log(document.execCommand('copy'))的结果为true，就是复制不成功，查询后得知，该方法对输入框有限制，输入框状态不能为disabled，所以解决方法为：

设置两个输入框，一个用于显示数据，一个用于实现复制功能，实现复制功能的输入框不能显示，设置其透明度为零，并让其脱离文档流。实现代码为：

<div>
    HTTP<br>
    <a-input type="text" id="downloadSrc1" 
        style="width: 200px;opacity: 0;position: absolute;" :value="httpUrlToRepo"
    />
    <a-input type="text" disabled style="width: 200px;" :value="httpUrlToRepo"/>
    <a-button @click="copy('downloadSrc1')">复制</a-button><br>
</div>

<div style="margin-top: 15px">
    SSH<br>
    <a-input type="text" id="downloadSrc2" 
        style="width: 200px;opacity: 0;position: absolute;" :value="sshUrlToRepo"
    />
    <a-input type="text" disabled style="width: 200px;" :value="sshUrlToRepo"/>
    <a-button @click="copy('downloadSrc2')">复制</a-button>
</div>

const copy = function (content){

    let copyText = document.getElementById(content);
    /* 选择复制内容 */
    copyText.select();

    // navigator.clipboard.writeText(copyText.value);
    console.log(document.execCommand('copy'))
    message.success("已复制")
}

所以，该功能完成。