HTML5实现复制文本功能,支持PC和移动端包括苹果和安卓,经测可用。
最近有项目需要用到复制文字的功能,各种百度和从某些插件的源码上总结了这个方法,已经测试,在原生H5的安卓和ios端中包括PC端都可以用,如果要用vue写法可自行更换相应绑定数据的代码,话不多说直接上代码:<template><input type="text" id="value" placeholder="要获取的输入的值"/><div @click="passwo
·
最近有项目需要用到复制文字的功能,各种百度和从某些插件的源码上总结了这个方法,已经测试,在原生H5的安卓和ios端中包括PC端都可以用,如果要用vue写法可自行更换相应绑定数据的代码,话不多说直接上代码:
<template>
<input type="text" id="value" placeholder="要获取的输入的值"/>
<div @click="passwordCopy">复制密码</div >
</template>
<script>
function passwordCopy(){
var G=document.getElementById('value').value;
const result = h5Copy(G)
if (result === false) {
console.log('不支持')
} else {
console.log('不复制成功')
}
}
function h5Copy(content) {
if (!document.queryCommandSupported('copy')) {
// 不支持
return false
}
let textarea = document.createElement("textarea")
textarea.value = content
textarea.readOnly = "readOnly"
document.body.appendChild(textarea)
textarea.select() // 选择对象
textarea.setSelectionRange(0, content.length) //核心
let result = document.execCommand("copy") // 执行浏览器复制命令
textarea.remove()
return result
}
</script>
还有另一种方法是直接css实现,但没有测试,不知道能不能用,上代码:
-webkit-touch-callout: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
以上就是H5的实现复制的两种方法。。
更多推荐
已为社区贡献2条内容
所有评论(0)