html5移动端点击复制,H5实现移动端复制文字功能
前言
移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~
效果预览
背景分析
业务需求很简单,将指定的文字(例如: 关键字、文案描述等)复制到手机的剪贴板上,方便用户直接进行粘贴
解决方案
相关API
document.execCommand
该方法允许运行命令来操纵可编辑内容区域的元素,其中执行 copy 命令,可以将当前选中的内容拷贝到剪贴板中。兼容性如下所示:
setSelectionRange
该方法用于设定 input 或 textarea 元素中当前选中文本的起始和结束位置,接受两个参数:被选中的第一个字符的位置索引、被选中的最后一个字符的下一个位置索引。兼容性如下所示:
select
该方法和 setSelectionRange 类似,唯一区别是 select 是全选,而 setSelectionRange 是手动指定选中范围
实现思路
DOM
在某一个 DOM 元素中添加一个容器 DOM ,然后在容器 DOM 中追加 input 标签,并重置 input 的默认样式,同时将容器 DOM 的宽度位置为 1 ,透明度设置为 0
.input_wrap {
position: absolute;
top: 0;
left: 0;
width: 1px;
opacity: 0;
overflow: hidden;
user-select: none;
}
.input_wrap input {
width: 1px;
resize: none;
border: none;
outline: none;
user-select: none;
color: transparent;
background: transparent;
}
JS逻辑
首先获取我们事先隐藏好的 input 元素,接着将 input 的 value 设置为待复制的文本,然后将焦点聚集在 input 上,再使用 setSelectionRange 方法选中待复制的文本,最后使用document.execCommand('copy')执行复制命令,即可将相关文本复制到客户端的剪贴板中
const input = document.getElementById('input');
input.value = '待复制的文本内容';
// 聚焦
input.focus();
// 选择需要复制的文本
if (input.setSelectionRange) {
input.setSelectionRange(0, input.value.length);
} else {
input.select();
}
try {
const result = document.execCommand('copy');
console.error(result ? '内容已复制' : '复制失败,请重试~');
} catch (e) {
console.error('复制失败,请重试~');
}
体验优化
尽管我们已经实现了复制的能力,但是复制之后页面上会出现输入键盘,为了更好的用户体验,我们需要想办法屏蔽键盘
blur
我们为了选中待复制的文案,手动调用了 input 的 focus 方法进行聚焦,为了屏蔽键盘,我们可以在复制结束后手动调用 input.blur() ,让键盘自动隐藏
activeElement
尽管我们手动调用了 blur 释放焦点,但是部分机型上仍然会弹出输入键盘,这里想到的解决方案是使用 document.activeElement.blur() 来进行二次屏蔽,最终实践效果还不错,基本所有机型都不会弹出输入键盘,或者弹出键盘后立马回弹消失
小结
移动端实现复制能力,主要还是依赖HTML文档暴露的API来实现,最后花费时间最多的还是在进行体验优化上
参考资料
源码地址
html5移动端点击复制,H5实现移动端复制文字功能相关推荐
- html5如何自动复制文字,H5实现移动端复制文字功能
前言 移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~ 效果预览 Demo 背景分析 业务需求很简单,将指定的文字(例如: 关键字.文案描述等)复制到手机的剪 ...
- 移动端h5文字长按复制_H5实现移动端复制文字功能
前言 移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~ 效果预览 背景分析 业务需求很简单,将指定的文字(例如: 关键字.文案描述等)复制到手机的剪贴板上,方 ...
- h5实现移动端拍照展示功能
一.需求 使用h5+js实现移动端拍照.多图展示以及图片存储功能. 二.原理 利用移动端对于文件上传时支持拍照上传 在html中利用input标签设置类型为file 移动端点击该input标签可进行选 ...
- 移动端语音html,掘金:H5实现移动端语音录制功能
年前做了一期语音口令的年度活动,从语音录制.上传到智能检测,以及后续的语音播放组件,语音录制的实现的方式是基于微信的JSSDK,本篇主要把语音录制板块整理了一下,供大家参考: 各位看官先上眼: 功能梳 ...
- jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析 代码实现 css分析 js分析 代码实现 只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求 为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
- html5 翻牌效果,HTML5实现移动端点击翻牌功能
效果 一个大小的两个面,在同一位置上 正面的Y轴旋转为0度 背面的Y轴旋转180度 隐藏被旋转的 div 元素的背面(backface-visibility) 点击的时候同时改变正面和背面的旋转角度, ...
- vue移动端点击复制文本内容
安装依赖包: npm install clipboard --save 在需要用到的vue文件导入: import Clipboard from 'clipboard'; import { Toast ...
- 移动端点击延迟300ms传说 你听过吗
「 H5开发引发问题 」 上篇文章刚说了 不要把公司当成家,然后这周我就差点把公司当家了,每天回去很晚,总之加班了. 然后在做项目的过程中,发现了一个由来已久的传说, 300ms延迟问题,可能很多同学 ...
- H5 vue-pdf 使用方法 复制粘贴直接用
H5 vue-pdf 使用方法 复制粘贴直接用 <!-- 如果印章不显示 全局搜索这行代码 然后注释掉 重新打包就可以了 _this3.setFlags(_util.AnnotationFlag ...
最新文章
- 5天5000万访问的个人网站是如何诞生的?
- php依次替换文本字符串中的图片src地址
- 用户系列之四:用户登录过程之配置文件的使用详解
- java sync和async区别_GCD中串行、并行与async、sync的区别
- 大型网站SEO执行策略
- 最短无序连续子数组—leetcode581
- sql2005数据库大全
- 每天进步一点点《ML - 逻辑回归》
- php exec执行多条命令,小技巧:在PHP中调用多条shell指令
- malloc函数的使用以及内存泄露情况
- Vagrant (一) - 基本知识
- 25.go doc 与 godoc
- Atitit 企业6大职能 attilax总结
- java xps文档_使用Java 将PPT转换为PDF、XPS等格式
- CF 449E Jzzhu and Squares解题报告
- Java实现控制台版CS
- 学生成长画像系统前端的一些感悟和知识积累
- 有50 只狗,找出其中病狗
- JSON字符串的使用
- idea开发配置-模板配置