需求
項(xiàng)目中需要使用粘貼功能，將已復(fù)制的內(nèi)容粘貼到輸入框中。（vue項(xiàng)目使用elementUI，該粘貼功能是瀏覽器自帶功能，屬于通用功能）
效果
代碼
html
<template>
<div class="box">
<el-input class="input-box" placeholder="請輸入手機(jī)號" v-model="phoneNum" clearable>
<el-button slot="append" icon="el-icon-copy-document" @click="clickPaste"></el-button>
</el-input>
</div>
</template>
js
<script>
export default {
data() {
return {
phoneNum: ''
}
},
methods: {
// 點(diǎn)擊復(fù)制
clickPaste() {
setTimeout(async () => {
try {
const text = await navigator.clipboard.readText()
console.log(text)
this.phoneNum = text // 如果只要數(shù)字加上后面這段代碼 .replace(/[^\d]/g, '')
} catch (err) {
this.$message.error('當(dāng)前無權(quán)限粘貼，請?jiān)O(shè)置權(quán)限！')
}
}, 100)
}
}
}
</script>
css文章來源：http://www.zghlxwxcb.cn/news/detail-821887.html
<style lang="scss" scoped>
.box {
width: 300px;
padding: 20px;
}
::v-deep .el-input-group__append {
padding: 0 20px;
}
</style>
參考文章
JavaScript：實(shí)現(xiàn)復(fù)制粘貼剪切功能文章來源地址http://www.zghlxwxcb.cn/news/detail-821887.html
到了這里，關(guān)于js 粘貼功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
