点击按钮复制链接（实现点击按钮，复制文本框中的的内容）

最新推荐文章于 2023-04-26 16:41:29 发布

飞渔的火车

最新推荐文章于 2023-04-26 16:41:29 发布

阅读量2.3w

点赞数 1

分类专栏： ES6

本文链接：https://blog.csdn.net/qq_36605557/article/details/81124299

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

想要的效果是，点击复制链接的按钮，然后就把事先准备好的链接复制上，然后crtr+v就能黏贴出来

我实在react的项目中使用的

// 复制链接方法
copyUrl() {
  let inputText = document.getElementById('inputText');
  let currentFocus = document.activeElement;
  inputText.focus();
  inputText.setSelectionRange(0, inputText.value.length);
  document.execCommand('copy', true);
  currentFocus.focus();
  if (document.execCommand('copy', true)) {
    Toaster.show({
      type: 'success',
      content: '复制链接地址成功'
    });
  }
}

//在进入页面的时候，就把链接准备好了

let copyUrl = 'http://f.xxx.com/priceList/detail/15?bpmCode='+self.state.bpmCode
self.setState({ copyBtnCuipiUrl: copyUrl }, () => {});

<input className="copyUrlInput" type="text" id="inputText" value={this.state.copyBtnCuipiUrl}/>
<Button className="copyUrlBtn" size="small" type="primary" onClick={this.copyUrl}>复制催批链接</Button>

//css 使得最开始的时候input框可以被button按钮给盖住

.copyUrl{
  float: right;
  .copyUrlInput{
    width: 20px;
    float: right;
    margin-right: 20px;
  }
  .copyUrlBtn{
    position: absolute;
    right: 20px;
  }
}