序文

本文关键内容分三局部，第一局部是需求剖析，第二局部是成功步骤，第三局部是疑问详解。

假设您只有要处置疑问，请阅读第一、二局部即可。

假设您有更多期间，进一步学习疑问相关常识点，请阅读至第三局部。

一、需求剖析

点击复制按钮，将某一区域文本复制到粘贴板，并可以在任何中央粘贴经常使用。

长按某一区域文本1秒钟，将文本复制到粘贴板，并可以在任何中央粘贴经常使用。

二、成功步骤

1、名目中的运行场景说明

在学习如何经常使用之前，咱们更关键的是要搞清楚，普通什么场景会用到文本复制性能。

文本一键复制和长按复制性能，我不时作为一种繁难的优化手腕经常使用，且在名目中经常使用的频率还算挺高的。

它可以提供更好的用户体验，缩小用户的操作步骤，并简化复制文本内容的环节。这样不只仅是节俭了用户的期间和精神，更关键的是能提高运行操作的易用性、准确性。

以下是一些经常出现的运行场景：

搞清楚这些，而后上方，就是如何经常使用的疑问了。

2、代码实例

模板代码：

<template><div><button@click="copyText">一键复制</button><div@mousedown="startLongPress"@mouseup="cancelLongPress"@mouseleave="cancelLongPress"><h1>长按复制</h1>{{text}}</div></div></template>

逻辑代码：

<scriptsetup>lettext="要复制的文本";letlongPressTimer=null;//复制方法constcopyText=()=>{//关键navigator.clipboard.writeText(text).then(()=>{window.alert("复制成功");}).catch((error)=>{window.alert("复制失败",error);});};//开局长按conststartLongPress=()=>{longPressTimer=setTimeout(()=>{copyText();},1000);//设置长按期间阈值，单位为毫秒};//敞开长按constcancelLongPress=()=>{clearTimeout(longPressTimer);};</script>

3、成功说明

咱们经过navigator.clipboard.writeText方法将文本复制到剪贴板。

在一键复制性能中，间接在按钮的点击事情中，调用copyText方法即可。

在长按复制性能中，经过mousedown事情触发startLongPress方法启动一个定时器，若长按必定期间后松开鼠标，则调用copyText方法口头复制操作；同时，经过mouseup和mouseleave事情触发cancelLongPress方法，肃清定时器，防止误触发复制操作。

大澈思考到navigator对象大家或者用的比拟少，所以对navigator对象繁难做了一下总结，有期间的好友可见第三局部学习。

三、疑问详解

1、对于navigator对象的总结

navigator是一个内置的Script对象，它示意阅读器的形态和标识信息。

经过navigator对象，可以失掉无关阅读器的各种信息，包括用户代理字符串、支持的个性和性能等。

navigator对象提供了许多属性和方法，以下是一些罕用的属性和方法：

js 复制文字功能

功能 ：点击按钮，复制值。 实现方法 ：通过原生js 的方法 (copy)巨坑 (‘copy’)不生效原因 ： 框不能有disabled属性 2.根据第一条扩展，input的width || height 不能为0； 框不能有hidden、display:none属性解决方案 ：在不改变原需求的情况下，新增一个input框，然后设置 opacity:0; 实现不可见， position:absolute; 脱离文档流解决占空间的问题语法： (aCommandName,aShowDefaultUI,aValueArgument)，返回值Boolean 如果返回false 则表示还不能支持； 参数说明： 命令的名称：常用的为copy，cut等； 注：“copy” 拷贝当前选中内容到剪贴板 “cut”剪贴当前选中的文字并复制到剪贴板 是否展示用户界面，一般为 false； 默认为null，示例 <input type=text value=被复制的内容 /> <div>被复制的内容</div> <button>点击复制</button> // 方法一：点击按钮复制文本框内容function myCopy(){ var copyVal = (copyVal); (); (copy); } // 方法二：点击按钮复制div标签内容 function myCopy(){ const range = (); ((copyInner)); const selection = (); if( > 0) (); (range); (copy); }

如何利用JS实现复制/粘贴功能

1、最基本的复制Java代码<script language=JavaScript>function readTxt(){alert((text));}function setTxt(){var t=(txt);();(text,());}</script><input value=测试><input type=button value=复制><input type=button value=读取>2、扩展复制：复制表格Java代码<INPUT TYPE=button value=选中测试表格>测试<TABLE border=1><TR><TD>测试表格</TD><TD>测试表格</TD></TR><TR><TD>测试表格</TD><TD>测试表格</TD></TR></TABLE>文字<SCRIPT LANGUAGE=JavaScript></SCRIPT>、兼容IE，firefox等浏览器的复制Java代码<script>function copyToClipboard(txt) {if() {();(Text, txt);} else if((Opera) != -1) { = txt;} else if () {try {(UniversalXPConnect);} catch (e) {alert(被浏览器拒绝！\n请在浏览器地址栏输入about:config并回车\n然后将_principal_support设置为true);}var clip = [/widget/clipboard;1]();if (!clip)return;var trans = [/widget/transferable;1]();if (!trans)return;(text/unicode);var str = new Object();var len = new Object();var str = [/supports-string;1]();var copytext = txt; = copytext;(text/unicode,str,*2);var clipid = ;if (!clip)return false;(trans,null,);}}</script><button你好！);>复制文本“你好！”</button><textarea></textarea>