textarea 失去焦点 选中文本不变色_很少又人知道的qjavascript操作：使用JavaScript读取所选文本并将其复制到剪贴板...

很少有人知道的qjavascript操作：使用JavaScript读取所选文本并将其复制到剪贴板

废话少说直接上干货。

document.execCommand()

一、检索用户选择的文本内容

让我们从顶部开始，检索用户在页面上选择的所有文本内容。为此，我们使用，这是所有现代浏览器和IE9 +都支持的方法 ：window.getSelection()

<h1> 

道可道，非常道；名可名，非常名。无名天地之始，有名万物之母。故常无欲，以观其妙；常

有欲，以观其徼

</h1>

// 选中  function getSelectionText(){    var selectedText = ""    if (window.getSelection){ // all modern browsers and IE9+      selectedText = window.getSelection().toString()   }    return selectedText }  // 监听事件，输出选中的文本  document.addEventListener('mouseup', function(){    var thetext = getSelectionText()    if (thetext.length > 0){ // check there's some text selected        console.log(thetext) // logs whatever textual content the user has selected on the page   } }, false)

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

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

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

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

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

选择了要阅读的文本后，我们将转向先前的getSelectionText()方法来读取所选元素的内容，例如：

演示：

天下皆知美之为美，斯恶(è)已；皆知善之为善，斯不善已。故有无相生，难易相成，长短相

较，高下相倾，音声相和(hè)，前后相随。是以圣人处无为之事，行不言之教，万物作焉而不辞，生而

不有，为而不恃，功成而弗居。夫(fú)唯弗居，是以不去

代码：

<div id="para">

天下皆知美之为美，斯恶(è)已；皆知善之为善，斯不善已。故有无相生，难易相成，长短相

较，高下相倾，音声相和(hè)，前后相随。是以圣人处无为之事，行不言之教，万物作焉而不辞，生而

不有，为而不恃，功成而弗居。夫(fú)唯弗居，是以不去

</div>br>

<button onclick="handleClick()"> 选择并显示文本</button> // 选择并读取页面上非表单元素的文本内容  function selectElementText(el){    var range = document.createRange() // create new range object    range.selectNodeContents(el) // set range to encompass desired element text    var selection = window.getSelection() // get Selection object from currently user selected text    selection.removeAllRanges() // unselect any user selected text (if any)    selection.addRange(range) // add range to Selection object to select it }  function handleClick() {    var para = document.getElementById('para')    selectElementText(para) // select the element's text we wish to read    var paratext = getSelectionText() // read the user selection    alert(paratext) // alerts "My mama always says..." }

三、选择并读取表单元素的内容，例如输入文本或TEXTAREA

对于选择和读取与表单相关的字段值(例如INPUT文本和TEXTAREA)，此过程与选择常规文本不同。我们大多数人已经知道选择一个表单字段的整个值，我们可以只使用inputElement.select()*，而要获取该值，则是probe inputElement.value。但是，也可以通过编程方式选择字段值的一部分，然后取回该值。让我们看看如何做到这一点。

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

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

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

演示：

选择前5个字符  选择倒数第五个字符

*注意： 在iOS设备(自iOS9起)中，inputElement.select()似乎无法使用快速选择表单元素的所有内容。但是，使用了inputElement.setSelectionRange()。因此，以下内容将跨浏览器和设备选择所有表单字段的文本：

 // 选择并读取元素表单内容  var emailfield = document.getElementById("email")   // this is necessary in most browsers before setSelectionRange() will work  // 点击选择输入框前5个  function handclickfont5() {    emailfield.focus()    emailfield.setSelectionRange(0, 5) // select first 5 characters of input field  }  // 点击选择输入框后5个  function handclickend5() {    emailfield.focus()    console.log(emailfield.value.length)    emailfield.setSelectionRange(5, emailfield.value.length) // select the 5th to last characters of input field  }

-读取字段值的选定部分

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

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

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

上述属性对于从尚不知道选择索引的表单域中获取任何用户选择的文本特别有用。以下演示使用这些属性回显用户从TEXTAREA中选择的内容：

演示(在文本区域内选择一些文本)：

代码：

// 读取字段值的选定部分 演示(在文本区域内选择一些文本)：  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)

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

四、将所选文本复制到用户剪贴板

好的，既然已经阅读了如何阅读页面上所选内容的基本内容，无论是在页面上，还是在特定的DIV或表单元素中，我们都可以继续进行下一个紧迫的问题，实际上是在复制该内容到剪贴板。正如本教程开始提到的那样，归结为使用该方法执行命令以将文本“复制”(或“剪切”)到剪贴板：document.execCommand()

这里的关键是line document.execCommand("copy")，它实际上执行将页面上当前选择的内容复制到剪贴板的操作。为了检测浏览器是否execCommand() 正确支持该方法，我们将操作放在一个try/catch()块中；如果调用execCommand()失败，则表明浏览器不支持此方法。

我们可以将新想到的copySelectionText()功能与任何先前的方法一起使用，以选择/检索某些文本，然后将其复制到剪贴板。例如，当用户将鼠标悬停在文档上时，下面的代码片段将复制用户在页面上选择的内容：

我们可以改进此过程，尽管仅在用户选择实际上包含一些数据时才执行“复制”操作。例如，如果用户仅单击页面而不突出显示任何内容，则不会选择任何数据，在这种情况下，复制操作应中止。只需查看用户预先选择的内容即可完成此操作：

现在该进行现场演示了。尝试在以下段落中选择任何文本，以查看其内容已复制到剪贴板(然后按“ Ctrl V”以粘贴并确认)。我还添加了一个工具提示，该提示会临时显示以表示每次成功：

演示(在下面的段落中选择任何文本以将其复制到剪贴板)：

“要享受健康，为家人带来真正的幸福，为所有人带来和平，首先必须纪律和控制自己的思想。如果一个人可以控制自己的思想，他就可以找到开悟的道路，以及所有的智慧和美德。自然会来找他。” -佛

代码：

function copySelectionText(){    var copysuccess // var to check whether execCommand successfully executed    try{        copysuccess = document.execCommand("copy") // run command to copy selected text to clipboard    } catch(e){        copysuccess = false    }    return copysuccess  }  var tooltip; // global variables oh my! Refactor when deploying!    var hidetooltiptimer  // 创建tips标签  function createtooltip(){ // call this function ONCE at the end of page to create tool tip object    tooltip = document.createElement('div')    tooltip.style.cssText =       'position:absolute; background:black; color:white; padding:4px;z-index:10000;'      + 'border-radius:2px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);'      + 'opacity:0;transition:opacity 0.3s'    tooltip.innerHTML = '已复制'    document.body.appendChild(tooltip)  }  // 显示tips 标签  function showtooltip(e){    var evt = e || event    clearTimeout(hidetooltiptimer)    tooltip.style.left = evt.pageX - 10 + 'px'    tooltip.style.top = evt.pageY + 15 + 'px'    tooltip.style.opacity = 1    hidetooltiptimer = setTimeout(function(){      tooltip.style.opacity = 0    }, 1000)  }  // 选中即复制  createtooltip() // create tooltip by calling it ONCE per page. See "Note" below  var buddhaquote = document.getElementById('buddhaquote')  buddhaquote.addEventListener('mouseup', function(e){    var selected = getSelectionText() // call getSelectionText() to see what was selected    if (selected.length > 0){ // if selected text length is greater than 0        var copysuccess = copySelectionText() // copy user selected text to clipboard        showtooltip(e)    }  }, false)

五、将选定的表单字段值复制到用户剪贴板

继续，我们可以轻松地对表单字段值执行相同的帽子戏法。在下一个示例中，我们在INPUT文本字段旁边添加一个控件，以使用户快速复制其值：

演示：

代码：

 // 复制input 内容  function copyfieldvalue(e, id){    var field = document.getElementById(id)    field.focus()    field.setSelectionRange(0, field.value.length)    var copysuccess = copySelectionText()    if (copysuccess){        showtooltip(e)    }  }

六、将DIV的内容复制到剪贴板

最后，从很好的角度来看，让我们看一个示例，单击该示例时，它会自动选择DIV的内容并将其复制到剪贴板：

演示(单击以下任何引号以选择其内容)：

道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不

知谁之子，象帝之先。

上善若水。水善利万物而不争，处众人之所恶(wù)，故几(jī)于道。居善地，心善渊，与

善仁，言善信，正善治，事善能，动善时。夫唯不争，故无尤。

道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不

知谁之子，象帝之先。

代码：

 // 案例  var motivatebox = document.getElementById('motivatebox')  motivatebox.addEventListener('mouseup', function(e){      var e = e || event // equalize event object between modern and older IE browsers      var target = e.target || e.srcElement // get target element mouse is over      if (target.className == 'motivate'){          selectElementText(target) // select the element's text we wish to read          var copysuccess = copySelectionText()          if (copysuccess){              showtooltip(e)          }      }  }, false)

这里没有什么新鲜的内容，我们只需监视mouseup引号DIV的共享父容器的“ ”事件即可检测用户何时单击了这些内部DIV之一。发生这种情况时，我们选择DIV的内容，然后使用之前创建的功能将其复制到剪贴板。

附加部分：

  <h1> 今天是个好天气h1>

 <div id="para">

道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不

知谁之子，象帝之先。

div>br>

 <button onclick="handleClick()"> 选择并显示文本button>  br><h3>endh3>    <input type="text" id="email" value="logs whatever textual content the user has selected on the page" style="width:600px;" > br>br>  <button onclick="handclickfont5()"> 选择输入框的前5个 button><button  onclick="handclickend5()"> 选择输入框的后5个 button>  br><h3>endh3>  <textarea id="quote" cols="50" rows="5">   Some text here  textarea>        <div id="output">div>  br><h3>endh3>  <span>选中即复制span>

 <div id="buddhaquote">

上善若水。水善利万物而不争，处众人之所恶(wù)，故几(jī)于道。居善地，心善渊，与

善仁，言善信，正善治，事善能，动善时。夫唯不争，故无尤。

 div>  br><h3>endh3>    <fieldset style="max-width:600px">    <legend>点击复制-分享本教程legend>    <input id="url" type="text" size="60" value="http://www.javascriptkit.com/javatutors/copytoclipboard.shtml" />    <a href="#" onClick="copyfieldvalue(event, 'url');return false">Copya>  fieldset>  br><h3>endh3>    <style>    .box {      display: flex;      justify-content:space-around;   }    .motivate{      border: 1px solid #ccc;      background-color: darkgoldenrod;      width: 30%;   }  style>  <div id="motivatebox" class="box" style="overflow: hidden; margin: 1em auto">

     <div class="motivate">

    持而盈之，不如其已。揣(chuǎi)而锐之，不可长保。金玉满堂，莫之能守。富贵而骄，自遗(

    yí)其咎。功成身退，天之道。

     div>  

     <div class="motivate">

    五色令人目盲，五音令人耳聋，五味令人口爽，驰骋畋(tián)猎令人心发狂，难得之货令

    人行妨。是以圣人为腹不为目，故去彼取此。

     div>      

     <div class="motivate">

    绝圣弃智，民利百倍；绝仁弃义，民复孝慈；绝巧弃利，盗贼无有。此三者，以为文不足，

    故令有所属，见(xiàn)素抱朴，少私寡欲

     div>  div>

线上演示地址，含所有源代码：

[点我]    https://www.xrmseo.com/copy.html 线上地址

结论