怎么使用JavaScript读取所选文本并将其复制到剪贴板

作者：Seet琸琸 | 来源：互联网 | 2023-01-15 08:28

本篇内容介绍了“怎么使用JavaScript读取所选文本并将其复制到剪贴板”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就

本篇内容介绍了“怎么使用Javascript读取所选文本并将其复制到剪贴板”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

选择并读取页面上非表单元素的文本内容

继续前进，我们还可以负责并动态选择然后在页面上检索我们想要的内容，例如特定DIV的内容，而不是简单地检索用户选择的内容。这与仅使用元素innerHTML或 innerText属性来获取其内容非常不同; 我们希望通过Javascript 实际选择该内容，从而打开其他可能的操作，例如将其复制到用户的剪贴板。

要选择非表单字段元素的文本内容，我们首先创建一个新的 Range对象并将其设置为包含所需的元素。然后，将范围添加到Selection对象以实际选择它。让我们看看它是如何工作的，这个函数根据传入元素的元素动态选择元素的文本内容：

五

"vertical-align: inherit;">"vertical-align: inherit;">function selectElementText（el）{"vertical-align: inherit;">"vertical-align: inherit;">

var range = document.createRange（）//创建新的范围对象 range.selectNodeContents（el）//设置范围以包含所需的元素文本 var selection = window.getSelection（）//从当前用户选择的文本中获取Selection对象 selection.removeAllRanges（）//取消选择任何用户选择的文本（如果有） selection.addRange（range）//为Selection对象添加范围以选择它}

要创建一个用于添加范围的对象，我们使用; 因为默认情况下此方法会返回用户选择的文本（如果有的话），所以我们会立即调用其方法来清除平板。然后，我们开始创建一个空白范围，将元素的内容归零以选择使用，然后将该范围添加到对象中以进行选择。Selection window.getSelection()removeAllRanges() range .selectNodeContents() Selection

一旦我们选择了我们想要阅读的文本，我们就转向我们之前的getSelectionText()方法来读取所选元素的内容，例如：

演示：

“我的妈妈总是说，&＃39;生活就像一盒巧克力。你永远不会知道你会得到什么。&＃39;” - Forrest

选择并检索文本

代码：

"vertical-align: inherit;">"vertical-align: inherit;">var para = document.getElementById（&＃39;para&＃39;）"vertical-align: inherit;">"vertical-align: inherit;">

selectElementText（para）//选择我们希望阅读的元素文本var paratext = getSelectionText（）//读取用户选择alert（paratext）//提醒“我的妈妈总是说...”

选择和读取表单元素的内容，如INPUT文本或TEXTAREA

为了选择和读取表格相关的字段值，例如INPUT文本和TEXTAREA，该过程不同于选择常规文本。我们大多数人已经知道选择表单字段的整个值，我们可以使用 inputElement.select()*，并检索该值，探测 inputElement.value。但是，还可以通过编程方式选择字段值的一部分并获取该值。让我们看看如何做到这一点。

- 以编程方式选择字段值的一部分

要动态选择INPUT文本或TEXTAREA元素的一部分，请使用以指示字段中所需选择的起始和结束索引： formElement.setSelectionRange()

"vertical-align: inherit;">"vertical-align: inherit;">var emailfield = document.getElementById（“email”）"vertical-align: inherit;">"vertical-align: inherit;">

emailfield.focus（）//在setSelectionRange（）工作之前，这在大多数浏览器中都是必需的emailfield.setSelectionRange（0,5）//选择输入字段的前5个字符emailfield.setSelectionRange（5，emailfield.value.length）//选择输入字段的第5个到最后一个字符

请注意，第二个参数 formElement.setSelectionRange()应该是要选择的结束字符的索引加1，因此要选择表单字段的前5个字符，要输入的结束索引值应为5或4（第5个字符的索引））加1。

演示：

选择前5个字符选择第5个到最后一个字符

*注意：在iOS设备中（从iOS9开始），使用inputElement.select()快速选择所有表单元素的内容似乎不起作用。但是，使用inputElement.setSelectionRange()的确如此。因此，以下选择跨浏览器和设备的所有表单字段的文本：

inputElement.setSelectionRange(0, inputElement.value.length)

- 读取字段值的选定部分

无论如何选择表单字段的值的一部分，无论是通过使用setSelectionRange()动态选择该部分，还是用户拖动他/她的鼠标来进行用户定义的选择，检索选择的方法是获取指数选择的开始和结束字符，然后使用它们从表单字段的值中提取该部分。我们可以使用以下方法获取活动选择的索引：

formElement.selectionStart：所选文本的第一个字符的索引。如果未选择任何文本，则它包含输入光标后面的字符的索引。
formElement.selectionEnd：所选文本的最后一个字符的索引。如果未选择任何文本，则它包含输入光标后面的字符的索引。

上述属性在从表单字段中获取任何用户选定文本时特别有用，其中选择的索引尚不为人所知。以下演示回应了用户使用以下属性从TEXTAREA中选择的内容：

演示（在textarea中选择一些文本）：

输出：

代码：

五

"vertical-align: inherit;">"vertical-align: inherit;">"vertical-align: inherit;"</code><code class="js plain">>"vertical-align: inherit;"</code><code class="js plain">></code><code class="js plain">这里有一些文字"vertical-align: inherit;"</code><code class="js plain">>"vertical-align: inherit;"</code><code class="js plain">></code><code class="js plain"></ textarea>的</code><code class="js plain">"vertical-align: inherit;"</code><code class="js plain">>"vertical-align: inherit;"</code><code class="js plain">></code><code class="js plain"><div id =“output”> </ div></code><code class="js plain">"vertical-align: inherit;"</code><code class="js plain">>"vertical-align: inherit;"</code><code class="js plain">></code><code class="js plain">《SCRIPT》</code><code class="js plain">"vertical-align: inherit;"</code><code class="js plain">>"vertical-align: inherit;"</code><code class="js plain">></code><code class="js keyword">var</code> <code class="js plain">quotearea = document.getElementById（</code><code class="js string">&＃39;quote&＃39;</code><code class="js plain">）</code><code class="js keyword">var</code> <code class="js plain">output = document.getElementById(</code><code class="js string">&＃39;output&＃39;</code><code class="js plain">)</code><code class="js plain">quotearea.addEventListener(</code><code class="js string">&＃39;mouseup&＃39;</code><code class="js plain">, </code><code class="js keyword">function</code><code class="js plain">(){</code><code class="js spaces"> </code><code class="js keyword">if</code> <code class="js plain">(</code><code class="js keyword">this</code><code class="js plain">.selectionStart != </code><code class="js keyword">this</code><code class="js plain">.selectionEnd){ </code><code class="js comments">// check the user has selected some text inside field</code><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">selectedtext = </code><code class="js keyword">this</code><code class="js plain">.value.substring(</code><code class="js keyword">this</code><code class="js plain">.selectionStart, </code><code class="js keyword">this</code><code class="js plain">.selectionEnd)</code><code class="js spaces"> </code><code class="js plain">output.innerHTML = selectedtext</code><code class="js spaces"> </code><code class="js plain">}</code><code class="js plain">}, </code><code class="js keyword">false</code><code class="js plain">)</code><code class="js plain"></code><code class="js plain"></code></td></tr></tbody></table>我们<code>mouseup</code>在目标TEXTAREA上附加一个“ ”事件，以便在用户将鼠标放入其中时进行监听。在事件处理函数内部，为了检测用户选择的内容，首先，我们检查TEXTAREA <code>selectionStart</code> 和<code>selectionEnd</code>属性是否包含不同的值 - 如果它们相同，则表示没有选择任何内容，在这种情况下它们都指向输入光标后面的字符。如果它们的值不同，我们继续将所选文本的索引映射到表单字段值的值，以使用派生实际选定的文本<code> formElement.value.substring()</code>。“怎么使用Javascript读取所选文本并将其复制到剪贴板”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程笔记网站，小编将为大家输出更多高质量的实用文章！ <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/javascript" target="_blank" title="javascript">javascript</a></li> <li><a href="https://www.php1.cn/tag/java" target="_blank" title="java">java</a></li> <li><a href="https://www.php1.cn/tag/ip" target="_blank" title="ip">ip</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/text" target="_blank" title="text">text</a></li> <li><a href="https://www.php1.cn/tag/range" target="_blank" title="range">range</a></li> <li><a href="https://www.php1.cn/tag/select" target="_blank" title="select">select</a></li> <li><a href="https://www.php1.cn/tag/io" target="_blank" title="io">io</a></li> <li><a href="https://www.php1.cn/tag/js" target="_blank" title="js">js</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


                
                                        会员登录 | 用户注册


        

        
    

    
        推荐阅读
        
            
                                
                    
                        web
                        CSS3选择器的使用方法详解，提高Web开发效率和精准度
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 14:37:52
                    

                

                
                                
                    
                        web
                        PHP实现断点续传乱序合并文件的方法和源码
                    

                    
                                                
                        本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因，文件需要分割成多个部分发送，因此无法按顺序接收。文章中提供了merge2.php的源码，通过使用shuffle函数打乱文件读取顺序，实现了乱序合并文件的功能。同时，还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 04:33:19
                    

                

                                
                    
                    
                
                
                                
                    
                        js
                        Voicewo在线语音识别转换jQuery插件的特点和示例
                    

                    
                                                
                            
                        
                                                
                        本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 20:01:16
                    

                

                
                                
                    
                        js
                        Python爬虫技术基础篇面向对象高级编程（中）的多重继承
                    

                    
                                                
                        本文介绍了Python爬虫技术基础篇面向对象高级编程（中）中的多重继承概念。通过继承，子类可以扩展父类的功能。文章以动物类层次的设计为例，讨论了按照不同分类方式设计类层次的复杂性和多重继承的优势。最后给出了哺乳动物和鸟类的设计示例，以及能跑、能飞、宠物类和非宠物类的增加对类数量的影响。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 16:19:02
                    

                

                
                                
                    
                        js
                        EPPlus绘制刻度线的方法及示例代码
                    

                    
                                                
                            
                        
                                                
                        本文介绍了使用EPPlus绘制刻度线的方法，并提供了示例代码。通过ExcelPackage类和List对象，可以实现在Excel中绘制刻度线的功能。具体的方法和示例代码在文章中进行了详细的介绍和演示。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-10 19:32:38
                    

                

                
                                
                    
                        search
                        如何自行分析定位SAP BSP错误
                    

                    
                                                
                            
                        
                                                
                        The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 19:58:05
                    

                

                
                                
                    
                        js
                        java 线程死锁模拟
                    

                    
                                                
                        1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 19:12:25
                    

                

                
                                
                    
                        js
                        Python瓦片图下载、合并、绘图、标记的代码示例
                    

                    
                                                
                            
                        
                                                
                        本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 12:14:55
                    

                

                
                                
                    
                        js
                        006_Redis的List数据类型
                    

                    
                                                
                            
                        
                                                
                        1.List类型是一个链表结构的集合,主要功能有push,pop,获取元素等。List类型是一个双端链表的结构,我们可以通过相关操作进行集合的头部或者尾部添加删除元素,List的设 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 09:57:22
                    

                

                
                                
                    
                        js
                        【机器学习手册】日期和时区操作的重要性及应用
                    

                    
                                                
                        本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景，描述了学童们面对老先生的教导时的反应，以及上官如在这个过程中的表现。同时，文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后，文章强调了日期和时区操作在机器学习中的重要性，并指出了其在实际应用中的作用和意义。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 17:40:14
                    

                

                
                                
                    
                        js
                        Day2列表、字典、集合操作详解
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了列表、字典、集合的操作方法，包括定义列表、访问列表元素、字符串操作、字典操作、集合操作、文件操作、字符编码与转码等内容。内容详实，适合初学者参考。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 14:14:34
                    

                

                
                                
                    
                        js
                        MooTools和JQuery并排 - MooTools and JQuery Side by Side
                    

                    
                                                
                        IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 13:43:58
                    

                

                
                                
                    
                        install
                        基于dlib的人脸68特征点提取(眨眼张嘴检测)python版本
                    

                    
                                                
                            
                        
                                                
                        文章目录引言开发环境和库流程设计张嘴和闭眼的检测引言(1)利用Dlib官方训练好的模型“shape_predictor_68_face_landmarks.dat”进行68个点标定 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 13:27:42
                    

                

                
                                
                    
                        input
                        iOS实现UITextField+Limit的字符限制方法
                    

                    
                                                
                        本文介绍了在iOS开发中使用UITextField实现字符限制的方法，包括利用代理方法和使用BNTextField-Limit库的实现策略。通过这些方法，开发者可以方便地限制UITextField的字符个数和输入规则。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 09:50:30
                    

                

                
                                
                    
                        web
                        EzPP 0.2发布，新增YAML布局渲染功能
                    

                    
                                                
                            
                        
                                                
                        EzPP发布了0.2.1版本，新增了YAML布局渲染功能，可以将YAML文件渲染为图片，并且可以复用YAML作为模版，通过传递不同参数生成不同的图片。这个功能可以用于绘制Logo、封面或其他图片，让用户不需要安装或卸载Photoshop。文章还提供了一个入门例子，介绍了使用ezpp的基本渲染方法，以及如何使用canvas、text类元素、自定义字体等。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-11 12:39:10
                    

                

                
                
                                
                    
                    
                    
                
                

            
        
    



















    

    
        
            
            
                
                
            

            
                Seet琸琸            

            
                这个家伙很懒，什么也没留下！            


        
    

    
    

    
    

    
        Tags | 热门标签
        
            
                                
                    frameworks
                
                                
                    bitmap
                
                                
                    php8
                
                                
                    const
                
                                
                    hash
                
                                
                    jsp
                
                                
                    utf-8
                
                                
                    input
                
                                
                    bytecode
                
                                
                    hashcode
                
                                
                    install
                
                                
                    go
                
                                
                    cookie
                
                                
                    stream
                
                                
                    search
                
                                
                    export
                
                                
                    php5
                
                                
                    chat
                
                                
                    bash
                
                                
                    client
                
                                
                    emoji
                
                                
                    web
                
                                
                    substring
                
                                
                    actionscrip
                
                                
                    case
                
                                
                    subset
                
                                
                    solr
                
                                
                    heatmap
                
                                
                    golang
                
                                
                    js
                
                                
            
        
    

    
    
        
            
            
        
        RankList | 热门文章
        
            
                                
                    1Android实现用户圆形头像和模糊背景
                
                                
                    2Android 图片保存到相册不显示的解决方案(兼容Android 10及更高版本)
                
                                
                    3Android Studio实现进度条效果
                
                                
                    4Android实现简单的banner轮播图
                
                                
                    5Android图像视图ImageView实现图像拉伸效果
                
                                
                    6android RadioGroup的使用方法
                
                                
                    7Android控件系列之相册Gallery&Adapter适配器入门&控件缩放动画入门
                
                                
                    8Android界面 NotificationManager使用Bitmap做图标
                
                                
                    9android内存优化之图片优化
                
                                
                    10android 添加按(power键)电源键结束通话(挂断电话)
                
                                
                    11Android中手机震动的设置(Vibrator)的步骤简要说明
                
                                
                    12Android中父View和子view的点击事件处理问题探讨
                
                                
                    13Android变形(Transform)之Camera使用介绍
                
                                
                    14Android 实用工具之emulator介绍
                
                                
                    15Android CheckBox 的使用案例分析
                
                            
        
    
    
    



    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved  |   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区      版权所有