背景:在实际需求中,需要使用js进行复制和粘贴,从而提高用户的体验性
技术实现:使用navigator相关API代替传统的复制粘贴功能,对于最新的chrome兼容性会更好
直接上代码:
<div>
<input class="inp_copy" value="这是要复制的内容" />
<button onclick="copy($1('.inp_copy').value)">复制</button>
</div>
<div>
<input class="inp_paste" />
<button onclick="paste()">粘贴</button>
</div>
<script>
function copy(text = '') {
navigator.clipboard.writeText(text).then(() => {
alert('复制成功')
}, () => {
alert('复制失败')
})
}
function paste() {
navigator.clipboard.readText().then((data) => {
$1('.inp_paste').value = data;
alert('粘贴成功')
}, () => {
alert('粘贴失败')
})
}
function $1(ele) {
return document.querySelector(ele);
}
</script>