在公司项目开发时,需要完成一键复制的功能,页面如下:
![](https://i-blog.csdnimg.cn/blog_migrate/5901360b3f57062f0386d24e24a9dc91.png)
该功能的输入框是无法获取焦点的,点击复制按钮可一键复制输入框的值,代码如下:
<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("已复制")
}
所以,该功能完成。