(Javascript)execCommand(‘copy’)复制文本但会增加额外的空白值

前端之家收集整理的这篇文章主要介绍了(Javascript)execCommand(‘copy’)复制文本但会增加额外的空白值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我整夜都在网上搜索,想弄清楚如何使用execCommand(‘copy’)功能.最后,在https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en上找到了一个非常好的解决方案.然而,我的新困境是,当我按下从输入字段复制值的按钮时,它会为它添加额外的空白区域.因此,通过正常的复制/粘贴操作(Ctl E和Ctl V),输入值如下所示:

TESTTESTTESTTEST

但是当我按下按钮将输入值复制到剪贴板时,它看起来像这样:

测试

测试

测试

测试

如何删除execCommand(‘copy’)添加到输入字段值的额外空格.我试过.replace(“”,“”);但这不起作用.我不确定如何继续.这是代码

function copyValueToClipBoard(containerid) {
var valueToBeCopied = document.getElementById(containerid);
var range = document.createRange();
range.selectNode(valueToBeCopied);
window.getSelection().addRange(range);
  try {  
    // Now that we've selected the anchor text,execute the copy command  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy email command was ' + msg);  
  } catch(err) {  
    console.log('Oops,unable to copy');  
  }  

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges(); 
  };
Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
最佳答案
问题在于选择. Window.getSelection通常适用于元素节点和文本节点.在您的情况下,您正在选择整个输入节点,从而为您提供结果.对于普通节点,您只能选择文本节点,但输入没有文本节点.

但是输入有setSelectionRange方法,它允许只选择值.使用selectionEnd属性,您可以选择整个值,但请注意整个节点.像这样:

function copyValueToClipBoard(containerid) {
var valueToBeCopied = document.getElementById(containerid);
valueToBeCopied.setSelectionRange(0,valueToBeCopied.selectionEnd)

  try {  
    // Now that we've selected the anchor text,unable to copy');  
  }  

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges(); 
  };
Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

猜你在找的HTML相关文章