JS 复制文本兼容移动端 iOS & android
有几个需要注意的地方。
首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input
,然后绑定需要复制的文本。
另外如果将 input
设置为 `type="hidden"
或者 display:none
则无法选中文本,也就无法复制,可以设置 position:absolute;left:-999px;
来隐藏文本域。
静态复制
const copyInput = document.querySelector(
'#copyInput'
);
copyInput.value =
'需要复制的文本'
;
copyInput.
select
();
document.execCommand(
'Copy'
);
input
function
copy(str) {
const input = document.createElement(
"input"
);
input.readOnly =
'readonly'
;
input.value = str;
document.body.appendChild(input);
input.
select
();
input.setSelectionRange(0, input.value.length);
document.execCommand(
'Copy'
);
document.body.removeChild(input);
}
input
聚焦的时候会弹起键盘,对于复制操作交互体验很差,可以用以下方式禁止键盘的弹起。<input
type
=
"text"
readonly
=
"readonly"
/>
<input
type
=
"text"
onfocus=
"this.blur()"
/>
const input = document.createElement(
"input"
);
input.readOnly =
'readonly'
;
$(
"#box"
).focus(
function
(){
document.activeElement.blur();
});
JS 复制文本兼容移动端 iOS & android的更多相关文章
- 使用原生 JS 复制文本兼容移动端 iOS & android
注意事项 使用 JS 实现复制功能并不是很难,但是有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设 ...
- 上传图片转为base64格式预览并压缩图片(不兼容IE9以下浏览器,兼容移动端ios,android)
前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- nodejs——js 实现webSocket 兼容移动端
nodejs——js 实现webSocket 兼容移动端 //服务器端 //npm install --save ws const express = require('express'); cons ...
- js 复制文本的四种方式
js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...
- js 复制文本到剪贴板
js 复制文本到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- H5移动端IOS/Android兼容性总结,持续更新中…
H5移动端IOS/Android兼容性总结,持续更新中… 1. IOS不识别日期 new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进 ...
- 用clipboard.js实现纯JS复制文本到剪切板
以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
随机推荐
- 统计Linux下的CPU状态信息
def cpu(): all_cpus=[] with open('e:/cpu.txt') as f: core={} for line in f.readlines(): ab=line.spli ...
- httpserver支持路由传输控制器
main.go package main import ( "net/http" "com.jtthink.net/myhttpserver/core" ) t ...
- React 按需加载 - 代码分隔
代码分隔 我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面. 例如: // ...
- vue移动端项目
用vue mint-ui jquery-weui写了一个移动端demo 技术栈 vue2.0 vue-router axios mint-ui jquery-weui webpack 页面截图 最后 ...
- UE4 Pak 相关知识总结
转载自:https://arcecho.github.io/2017/07/02/UE4-Pak-%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB ...
- Python 中的 map, reduce, zip, filter, lambda基本使用方法
map(function, sequence[, sequence, ...] 该函数是对sequence中的每个成员调用一次function函数,如果参数有多个,则对每个sequence中对应的元素 ...
- 关于sublime text2的一些问题(为解决)
1. 编写markdown文件后,如何转成pdf ? 2. 执行程序时,如何在控制台输入数据?
- SQLServer —— 视图
一.视图的概念 是存储在服务器端的一个查询块,是一张虚拟表. 表示一张表的部分数据或多张表的综合数据. 其结构和数据是建立在对表的查询基础上. 视图的使用,跟对普通的表的查询使用完全一样. 二.视图中 ...
- vagrant up提示"Couldn't open file /path/to/base"的错误解决方法
在vagrant使用命令vagrant up启动虚拟机时 出错: C:\Vagrant>vagrant up Bringing machine 'default' up with 'virtua ...
- 猜年龄v2.0
''' 用户登录,只有三次机会 给定年龄,用户可以猜三次年龄 年龄猜对,让用户选择两次奖励,输入无效字符,让其选择要不要礼物 用户选择两次奖励后可以退出,选择第一次后提示还有一次 ''' #基本信息定 ...