精华内容
参与话题
问答
  • 前言移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~效果预览背景分析业务需求很简单,将指定的文字(例如: 关键字、文案描述等)复制到手机的剪贴板上,方便用户直接...

    前言

    移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~

    效果预览

    背景分析

    业务需求很简单,将指定的文字(例如: 关键字、文案描述等)复制到手机的剪贴板上,方便用户直接进行粘贴

    解决方案

    相关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来实现,最后花费时间最多的还是在进行体验优化上

    参考资料

    源码地址

    展开全文
  • 移动端长按文字复制功能

    万次阅读 2018-03-01 11:09:06
    微信上要实现一个点击复制兑换码的功能,上网找了很久,找到了zero clipboard插件只能在PC端用,手机端并没有比较好的解决方案,无奈苦逼找产品商量,改为长按复制。 解决方案 微信默认就是支持文本长按选择,所以...

    遇到的问题

    微信上要实现一个点击复制兑换码的功能,上网找了很久,找到了zero clipboard插件只能在PC端用,手机端并没有比较好的解决方案,无奈苦逼找产品商量,改为长按复制。

    解决方案

    微信默认就是支持文本长按选择,所以只需要调整字体样式后,几乎不需要写什么代码,这份任务就完成了,但是。。。情况并不如我所想。 
    找了半天并没有发现什么异样,但是就是长按无法复制。 
    解决思路 
    1.新写一个页面,在微信端浏览,发现可以长按复制(排除微信端不能长按复制的猜想) 
    2.删除原页面的脚本文件,发现可以仍然不可以长按复制(排除脚本影响) 
    3.删除原页面公共css,发现可以长按复制(确定公共css影响) 
    4.逐一排查,发现一个css声明 -webkit-user-select:none;

    关于user-select

    以下内容摘自css参考手册

    语法

    user-select:none | text | all | element 
    默认值:text 
    适用于:除替换元素外的所有元素 
    继承性:无 
    动画性:否 
    计算值:指定值

    取值

    none:文本不能被选择 
    text:可以选择文本 
    all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 
    element:可以选择文本,但选择范围受元素边界的约束

    说明

    设置或检索是否允许用户选中文本。 
    IE6-9不支持该属性,但支持使用标签属性 onselectstart=”return false;” 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性; 
    直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable=”on” 来达到 user-select:none 的效果;unselectable 的另一个值是 off; 
    除Chrome和Safari外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本; 
    对应的脚本特性为userSelect。

    兼容性

    兼容性

    展开全文
  • 移动端点击复制文字

    2019-11-22 18:22:13
    这里有一个客服微信号, 需要用户点击复制复制到粘贴板 html <div id="number" onclick="copy()">139xxxx7772</div> <textarea id="input"></textarea> js function copy() { const ...

    需求:

    这里有一个客服微信号, 需要用户点击并复制到粘贴板

    html

    <div id="number" onclick="copy()">139xxxx7772</div>
    <textarea id="input"></textarea>
    

    js

    function copy() {
        const text = document.getElementById('number').innerText;
        const input = document.getElementById('input');
        input.value = text;
        input.select(); // 选中文本
        input.setSelectionRange(0, input.value.length); // 这里兼容 ios
        document.execCommand("copy");
        input.blur(); // 这里记得写哟, 不然会弹出手机的软键盘
      	alert('复制成功!')
      }
    
    展开全文
  • 移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本百度谷歌搜索的答案是 iOS手机系统自带 需要设置禁用 我们需求是要实现此功能 可是我在手机测试 并没有实现长按复制文本 之前这样设置可以实现复制文本 这次却...

    移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本

    百度谷歌搜索的答案是 iOS手机系统自带 需要设置禁用 我们需求是要实现此功能 可是我在手机测试 并没有实现长按复制文本 之前这样设置可以实现复制文本 这次却无法 实现

    需要实现复制右下角微信号 另外我给提交按钮设置属性 就可以实现 求大神解惑

    p.dctxixi{

    float:right;

    padding: 0 0.3rem 0;

    line-height: 1.2rem;

    height:1.2rem;

    width:4rem;

    border:none;

    -webkit-touch-callout:inherit;

    -webkit-user-select:text !important;

    user-select: text;

    -khtml-user-select: text;

    -moz-user-select: text;

    -ms-user-select: text;

    }

    }

    展开全文
  • 可以用css属性来控制 -moz-user-select:none; -webkit-user-select:none; 转载于:https://www.cnblogs.com/cococe/p/10475786.html
  • //复制 copyFun: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //区分iPhone设备 console.log('ios') window.getSelection().removeAllRanges();... //要复制文字的节点
  • 有时候操作H5页面需要长按某个按钮的时候,会出现浏览器系统自带的复制功能很烦,怎么解决呢,只需要加入以下样式。 body { -webkit-touch-callout: none; /*系统默认菜单被禁用*/ -webkit-user-select: none; ...
  • 如果有这样的需求:点击一个按钮,复制某个文本的文字到剪贴板以供使用,我们就需要用到一些方法。在pc上我们复制文本可以使用 document.execCommand('copy'); 但是在移动端是不行的。我选用的方案是clipboard,实测...
  • 适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/)效果演示:PC端移动端(在浏览器将设备切换为手机,这里切换为iphone),swiper支持移动端触控左右滑动代码部分(复制粘贴可直接使用):1 2 3 4 Swiper.js...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="u_div"> <...
  • 移动端之禁止长按复制文字 在css中设置以下即可 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-...
  • 移动端复制按钮,

    千次阅读 2016-07-28 18:54:06
    今天公司让做一个可以在移动端复制某区域的文字,是点击一个按钮达到复制效果,本人比较菜,搞了一下午,由于原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF...
  • &lt;script src="js/clipboard.min.js"&gt;&lt;/script&gt;//第一步当然是引入js 官网地址:https://clipboardjs.com/ ...下载或者clone 代码到本地 里面有 clipboard.min.js ......
  • 在IOS手机上测试了以下的浏览器、链接等: 打不开微信:百度浏览器,搜狗...复制的内容 点我 script: // 浏览器判断 var browser = { versions: function() { var u = navigator.userAgent; return { trid
  • clipboard.js移动端无法实现复制

    千次阅读 2018-10-23 11:52:38
    在项目中使用clipboard.js插件去实现点击按钮,复制文字到剪切板的功能。同样的代码,在PC可以实现正常复制但是在移动端却失效 主要是因为移动端项目为了防止用户长按文本实现复制,一般在重置reset.css里面都会设置...
  • 需求:当点击某个按钮时复制某个标签里的文字。 实现: <body> <div> <p id='text'>这是一段文字</p> <button onclick='copy'>点击复制p标签内容</button> </div> ...
  • 移动端页面,需要复制一段文字码。 在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域, 把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的! 举个例子: 如下图:  1.我...
  • 禁止复制方法:*{ -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; -webkit-touch-callout: none; -ms-user-select:none; /*IE10*/ user-select:none;}input,textarea { -...
  • 开发公众号需要用到长按,按钮上又有文字,经常出现复制文字。不知道怎么禁止,有木有大佬扶一下,目前应急方式就是在按钮上方加一个透明框,来阻止文本长按复制。试过加css @touchstart.stop.prevent 阻止默认...
  • 如题,求各大神指点,发现pc的一些方法兼容问题头疼!
  • 用户通过maxlength来控制textarea的字数限制时,如果用户通过复制粘贴过来时,删除一个文字时,再输入文字的时候字数控制就变乱了,输入不了最后一个文字。 //todo 可以通过oninput事件控制,有待验证 转载于:...
  • 页面中全部文字内容禁止长按复制的方法 CSS 写法 *{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -khtml-user-select:none; /早期浏览器/ -moz-user-sele...

空空如也

1 2 3 4 5
收藏数 83
精华内容 33
关键字:

移动端复制文字