Question

当我单击按钮时，我想从按钮复制文本。我重用了w3 schools中的代码。与w3学校代码的不同之处在于，当您单击按钮时，它会从输入中复制文本，我想从单击的按钮中复制文本。

<template>
  <img :src="creatorImage" @error="imageError = true"/>
</template>

<script>
...
data() {
  return {
      imageError: false,
      defaultImage: require("@/assets/imgs/default.jpg")
  };
},
computed: {
    creatorImage() {
        return this.imageError ? this.defaultImage : "creator-image.jpg";
    }
}
...
</script>

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  document.execCommand("copy");
}

当我console.log copyText时，它显示按钮上的文本，但是我的文本从未被复制。

你知道为什么吗？

Answer 1

您的问题是您只存储了import React, { Component } from 'react'; import MyModule from './myModule.js' class App extends Component { constructor() { super(props); this.state = { selectedValues : '' }; this.printValues = this.printValues.bind(this); this.addValues = this.addValues.bind(this); } printValues() { console.log(this.state.selectedValues); } addValues(val){ this.setState({ selectedValues : this.state.selectedValues + " , "+val }) } render() { return( <React.Fragment> <MyModule addValue={this.addValues}/> <button onClick={this.printValues} >Print values</button> </React.Fragment> ) } } export default App中的value，但是您什么也没有选择，因此什么也不会复制到剪贴板。

您需要将该内容放入button 并使用input选择其值，以便可以将其复制：

.select()

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  
  var input = document.createElement("input");
  input.value = copyText;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input); 
}

Answer 2

function copyClipboard() {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(document.getElementById("myButton").innerHTML).select();
    document.execCommand("copy");
    $temp.remove();
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

如何复制按钮文字？

2 个答案: