博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

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

javascript admin 47℃ 0评论

很少有人知道的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的内容。这与仅使用元素的innerHTMLinnerText属性来获取其内容非常不同。我们希望 通过JavaScript 实际选择该内容,从而打开其他可能的操作,例如将其复制到用户剪贴板。

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

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

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

演示:

“我妈妈总是说,’生活就像一盒巧克力。你永远都不知道会得到什么。’”-福雷斯特

选择并检索文本

代码:

<div id="para">“我妈妈总是说,'生活就像一盒巧克力。你永远都不知道会得到什么。'-福雷斯特</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 selectionStartselectionEnd属性是否包含不同的值-如果它们相同,则表示未选择任何内容,在这种情况下它们都指向索引。输入光标之后的字符。如果它们的值不同,我们将使用来将所选文本的索引映射到表单字段值的值,以得出实际的所选文本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的内容并将其复制到剪贴板:

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

“就在毛毛虫以为世界即将终结时,他变成了一只蝴蝶。” – 谚语

“伟大的头脑讨论想法;一般的头脑讨论事件;小的头脑讨论人们。” -埃莉诺·罗斯福

“没有你的同意,没有人会让你自卑。” -埃莉诺·罗斯福

代码:

 // 案例
  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>end</h3>

  <!--  表单演示 -->
  <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>end</h3>
<!-- 是否选中 -->
  <textarea id="quote" cols="50" rows="5">
    Some text here
  </textarea>
     
    <div id="output"></div>

  </br><h3>end</h3>
  <span>选中即复制</span>
  <div id="buddhaquote">
    “要享受健康,为家人带来真正的幸福,为所有人带来和平,首先必须纪律和控制自己的思想。如果一个人可以控制自己的思想,他就可以找到开悟的道路,以及所有的智慧和美德。自然会来找他。” -佛
  </div>
  </br><h3>end</h3>

  <!-- 将选定的表单字段值复制到用户剪贴板 -->
  <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">Copy</a>
  </fieldset>

  </br><h3>end</h3>
  <!-- 将DIV的内容复制到剪贴板 -->
  <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">
      "Just when the caterpillar thought the world was ending, he turned into a butterfly." --Proverb
      </div>
  
      <div class="motivate">
      "Great minds discuss ideas; average minds discuss events; small minds discuss people." --Eleanor Roosevelt
      </div>
      
      <div class="motivate">
      "No one can make you feel inferior without your consent." --Eleanor Roosevelt
      </div>
  </div>

线上演示地址,含所有源代码:

扫码关注我微信公众号

img 结论

转载请注明:前端Tree » 很少有人知道的qjavascript操作:使用JavaScript读取所选文本并将其复制到剪贴板

喜欢 (3)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址