怎么使用JavaScript读取所选文本并将其复制到剪贴板
本篇内容介绍了“怎么使用JavaScript读取所选文本并将其复制到剪贴板”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
成都创新互联公司专业IDC数据服务器托管提供商,专业提供成都服务器托管,服务器租用,简阳服务器托管,简阳服务器托管,成都多线服务器托管等服务器托管服务。
选择并读取页面上非表单元素的文本内容
继续前进,我们还可以负责并动态选择然后在页面上检索我们想要的内容,例如特定DIV的内容,而不是简单地检索用户选择的内容。这与仅使用元素innerHTML
或 innerText
属性来获取其内容非常不同; 我们希望 通过JavaScript 实际选择该内容,从而打开其他可能的操作,例如将其复制到用户的剪贴板。
要选择非表单字段元素的文本内容,我们首先创建一个新的 Range对象并将其设置为包含所需的元素。然后,将范围添加到Selection
对象以实际选择它。让我们看看它是如何工作的,这个函数根据传入元素的元素动态选择元素的文本内容:
1 2 3 4 五 6 7 |
|
要创建一个用于添加范围的对象,我们使用; 因为默认情况下此方法会返回用户选择的文本(如果有的话),所以我们会立即调用其方法来清除平板。然后,我们开始创建一个空白范围,将元素的内容归零以选择使用,然后将该范围添加到对象中以进行选择。Selection
window.getSelection()
removeAllRanges()
range
.selectNodeContents()
Selection
一旦我们选择了我们想要阅读的文本,我们就转向我们之前的getSelectionText()
方法来读取所选元素的内容,例如:
演示:
“我的妈妈总是说,'生活就像一盒巧克力。你永远不会知道你会得到什么。'” - Forrest
选择并检索文本
代码:
1 2 3 4 |
|
选择和读取表单元素的内容,如INPUT文本或TEXTAREA
为了选择和读取表格相关的字段值,例如INPUT文本和TEXTAREA,该过程不同于选择常规文本。我们大多数人已经知道选择表单字段的整个值,我们可以使用 inputElement.select()*
,并检索该值,探测 inputElement.value
。但是,还可以通过编程方式选择字段值的一部分并获取该值。让我们看看如何做到这一点。
- 以编程方式选择字段值的一部分
要动态选择INPUT文本或TEXTAREA元素的一部分,请使用以指示字段中所需选择的起始和结束索引:
formElement.setSelectionRange()
1 2 3 4 |
|
请注意,第二个参数 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中选择一些文本):
输出:
代码:
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
我们mouseup
在目标TEXTAREA上附加一个“ ”事件,以便在用户将鼠标放入其中时进行监听。在事件处理函数内部,为了检测用户选择的内容,首先,我们检查TEXTAREA selectionStart
和selectionEnd
属性是否包含不同的值 - 如果它们相同,则表示没有选择任何内容,在这种情况下它们都指向输入光标后面的字符。如果它们的值不同,我们继续将所选文本的索引映射到表单字段值的值,以使用派生实际选定的文本 formElement.value.substring()
。
“怎么使用JavaScript读取所选文本并将其复制到剪贴板”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
文章名称:怎么使用JavaScript读取所选文本并将其复制到剪贴板
本文URL:http://ybzwz.com/article/jeeecg.html