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);

}

function copyText(text) {

var input = document.createElement("input");

var currentFocus = document.activeElement;

document.body.appendChild(input);

input.readOnly = ‘readonly‘;

input.value = text;

input.focus();

if (input.setSelectionRange)

input.setSelectionRange(0, input.value.length);

else

input.select();

try {

var flag = document.execCommand("copy");

} catch (eo) {

var flag = false;

}

input.blur();

document.body.removeChild(input);

currentFocus.focus();

currentFocus.blur();

return flag;

}

移动端禁止弹出输入键盘

在 iOS 中 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();

});

原文地址:https://www.cnblogs.com/FACESCORE/p/11238738.html

时间: 2024-11-09 10:12:29

JS 复制文本兼容移动端 iOS & android的相关文章

H5移动端IOS/Android兼容性总结,持续更新中…

H5移动端IOS/Android兼容性总结,持续更新中… 1. IOS不识别日期 new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进行各种操作转化,而在IOS下为invalid date,获取到的时间戳为NaN,确实有点坑啊,只能识别new Date("2018/07/01 08:00:00")这种的,所以需要转化一下,解决方法为统一增加.replace(/-/g,'/'): new Date("2018-0

jQuery/Js复制文本到剪贴板

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery/Js复制文本到剪贴板</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> <scr

关于js复制文本信息(按钮级别)

最近应产品要求,需要实现一个按钮级别热复制文本功能,效果就是单击按钮复制对应的文本,该文本是需要从数据库里面取出来然后加密的,最初的打算是使用js插件在前台页面搞定.    于是上网找了一些相关资料,发现几乎都是用的zeroClipBoard这个插件,这个插件使用的是flash来实现复制效果,但是flash在目前已 经不再流行,甚至有些浏览器已经不再对flash支持或者完全禁用,于是便暂时放弃了这个想法.但是在查找途中发现ie竟然可以一句代码搞定复制,顿时觉 得好无语(尤其是对比ie和其他浏览器

Emoji表情符号兼容方案(适用ios,android,wp等平台)

http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里面已经是很流行使用的一种表情. 手机上如何使用emoji: 1.iphone.ipad系统:安装emoji free,再设置-通用-键盘-国际键盘-添加新的键盘,

通过js自动判断移动终端设备(ios\android等)

当用户用移动设备扫描一个二维码是,将扫描后的链接链接到一个页面,该页面只包含判断移动终端设备的js,判断好后自动跳转到对应的链接 或下载对应的内容. html代码如下: 1 <script> 2 var browser = { 3 versions: function() { 4 var u = navigator.userAgent, app = navigator.appVersion; 5 return {//移动终端浏览器版本信息 6 trident: u.indexOf('Tride

JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id="codeBtn" data-clipboard-target="#input">复制</span> js代码 <script type="text/javascript"> function copyArticle(even

js复制文本

<div cols="20" id="biao1" style="display: none;">{$banner.title}</div> function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInput.valu

C#/IOS/Android通用加密解密方法

原文:C#/IOS/Android通用加密解密方法 公司在做移动端ios/android,服务器提供接口使用的.net,用到加密解密这一块,也在网上找了一些方法,有些是.net加密了android解密不了,或者反之.下面的是三个平台都可以加密解密的方法.加密解密中用到的key="1234578";在调取方法时传值即可. C#代码 #region 跨平台加解密(c#) /// <summary> /// 对字符串进行DES加密 /// </summary> ///

js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行粘贴. 案例2:在移动端(android 和 iOS端),用户获得邀请码之后,可以使用一键复制的功能,将邀请码复制到剪切板,然后在app中进行兑换. 使用jQuery中的方法监听用户的剪切.复制.粘贴的行为 $("#cut").on("cut",function(){ al