当前位置:首页 > 数码 > 集成了文本一键复制和长按复制性能-JS-处置打算 (文本集是什么)

集成了文本一键复制和长按复制性能-JS-处置打算 (文本集是什么)

admin4周前 (04-22)数码16

序文

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

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

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

一、需求剖析

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

长按某一区域文本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>

免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。

标签: JS

“集成了文本一键复制和长按复制性能-JS-处置打算 (文本集是什么)” 的相关文章

JS-掌握不同方法并了解其优缺点-中克隆对象的终极指南 (js掌握程度)

JS-掌握不同方法并了解其优缺点-中克隆对象的终极指南 (js掌握程度)

对象克隆是指创建对象的副本而不修改原始对象。这是在需要操纵对象而不影响其原始状态的情况下很有用的。 浅克隆 浅克隆只复制对象顶层的属性。嵌套对象或数组的引用仍然指向原始对象。...

JavaScript-彻底把握-中的类型转换-从根底到初级 (javascript指什么)

JavaScript-彻底把握-中的类型转换-从根底到初级 (javascript指什么)

1.什么是类型转换? script是一种弱类型言语,这象征着变量是没有明白类型的,而是由JavaScript引擎在编译时隐式成功。类型转换就是将一种数据类型转换为另一种数据类型,例如: 2...

在名目中辨别经常使用防抖和节流时的思考要素-JS疑问 (在名目中辨别真假)

在名目中辨别经常使用防抖和节流时的思考要素-JS疑问 (在名目中辨别真假)

序文 大家好,我是大澈! 本文约2300+字,整篇阅读大概须要6分钟。 本文关键内容分三局部,第一局部是需求剖析,第二局部是成功步骤,第三局部是疑问详解。 假设您只要要处置...

系统架构设计 (系统架构设计怎么写)

系统架构设计 (系统架构设计怎么写)

今天,我将与你分享 6 个简单易行的实用小技巧,它们可以帮助你提高效率,简化生活,让你事半功倍。 技巧 1:使用番茄工作法提高专注力 番茄工作...

运行时纷至沓来-全方位JS-运行时盘点-新-JS

运行时纷至沓来-全方位JS-运行时盘点-新-JS

Node.js 是 JavaScript 开发领域的领头羊,但随着时间的推移,新的运行时环境不断涌现,为开发者提供了更多选择。本文将对现有的 JavaScript 运行时进行盘点,探讨它们各自的优...

结构函数-深度解析-原型链-JavaScript-类和承袭机制 (结构函数的定义)

结构函数-深度解析-原型链-JavaScript-类和承袭机制 (结构函数的定义)

本文深化浅出地探讨了Script结构函数、原型、类、承袭的个性和用法,以及它们之间的相关。宿愿看完本文,能协助大家对它们有愈加明晰通透的看法和把握! 01、前言 妇孺皆知,JavaScrip...