使用JavaScript读取所选文本并将其复制到剪贴板-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

询问大多数开发人员如何将用户选择的内容复制到剪贴板,他们会提到Flash的需求(因此 Zeroclipboard等脚本的流行 )。然而,这种想法的调整现在归功于最近浏览器对JavaScript中关键技术的支持的改进,这使得复制到剪贴板本身成为可能。这种JavaScript方法在IE9 +,Firefox 41+和Chrome 42+中得到支持,最终为浏览器本身带来了原生剪切/复制支持。在本教程中,我们将看到如何阅读用户选择的文本内容,动态选择页面上的一些文本,最后但并非最不重要的是,将所选内容复制到剪贴板,所有这些都只使用JavaScript。我们现在正进入无Flash区域! document.execCommand()

我们提供的服务有:成都做网站、成都网站制作、微信公众号开发、网站优化、网站认证、大余ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的大余网站制作公司

检索用户选择的文本内容

让我们从顶部开始,检索用户在页面上选择的内容,直到任何文本内容。为此,我们使用了所有现代浏览器和IE9 +支持的方法 : window.getSelection()

1

2

3

4

6

7

"vertical-align: inherit;">"vertical-align: inherit;">function getSelectionText(){"vertical-align: inherit;">"vertical-align: inherit;">

    var selectedText =“”"vertical-align: inherit;">"vertical-align: inherit;">

    if(window.getSelection){//所有现代浏览器和IE9 +

        selectedText = window.getSelection()。toString()"vertical-align: inherit;">"vertical-align: inherit;">

    }"vertical-align: inherit;">"vertical-align: inherit;">

    返回selectedText"vertical-align: inherit;">"vertical-align: inherit;">

}

window.getSelection()返回页面上当前选定的文本,并返回包含该数据的对象。要检索实际文本,我们使用它将其转换为字符串。以下示例在用户将鼠标悬停在文档上时调用我们的函数,以便查看用户选择的内容(如果有): SelectiontoString()getSelectionText()

1

2

3

4

6

"vertical-align: inherit;">"vertical-align: inherit;">document.addEventListener('mouseup'function(){"vertical-align: inherit;">"vertical-align: inherit;">

    var thetext = getSelectionText()"vertical-align: inherit;">"vertical-align: inherit;">

    if(thetext.length> 0){//检查是否选择了一些文本

        console.log(thetext)//记录用户在页面上选择的任何文本内容

    }"vertical-align: inherit;">"vertical-align: inherit;">

},false

我们首先检查是否选择了一些文本,就像用户只是单击页面一样,没有。

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

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

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

1

2

3

4

6

7

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

演示:

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

选择并检索文本

代码:

1

2

3

4

"vertical-align: inherit;">"vertical-align: inherit;">var para = document.getElementById('para'"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()

1

2

3

4

"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中选择一些文本):

输出:

代码:

1

2

3

4

6

7

8

9

10

11

12

13

14

15

16

17

18

"vertical-align: inherit;">"vertical-align: inherit;">