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

发布时间：2021-11-06 13:47:59 作者：iii
来源：亿速云阅读：140

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

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

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

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

五

function selectElementText（el）{

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()方法来读取所选元素的内容，例如：

演示：

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

选择并检索文本

代码：

var para = document.getElementById（'para'）

selectElementText（para）//选择我们希望阅读的元素文本

var paratext = getSelectionText（）//读取用户选择

alert（paratext）//提醒“我的妈妈总是说...”

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

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

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

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

var emailfield = document.getElementById（“email”）

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中选择一些文本）：

输出：

代码：

五

<textarea id =“quote”cols =“50”rows =“5”>

这里有一些文字

</ textarea>的

<div id =“output”> </ div>

<SCRIPT>

var quotearea = document.getElementById（'quote'）

var output = document.getElementById('output')

quotearea.addEventListener('mouseup',function(){

if (this.selectionStart !=this.selectionEnd){// check the user has selected some text inside field

var selectedtext =this.value.substring(this.selectionStart,this.selectionEnd)

output.innerHTML = selectedtext

}

},false)

</script>

我们mouseup在目标TEXTAREA上附加一个“ ”事件，以便在用户将鼠标放入其中时进行监听。在事件处理函数内部，为了检测用户选择的内容，首先，我们检查TEXTAREA selectionStart 和selectionEnd属性是否包含不同的值 - 如果它们相同，则表示没有选择任何内容，在这种情况下它们都指向输入光标后面的字符。如果它们的值不同，我们继续将所选文本的索引映射到表单字段值的值，以使用派生实际选定的文本 formElement.value.substring()。

“怎么使用JavaScript读取所选文本并将其复制到剪贴板”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

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

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

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

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

- 读取字段值的选定部分

相关阅读