javascript - 如何自动复制输入的文本？

Question

我正在使用 React，我希望当用户点击一个图标或按钮时，一个 url 被复制到剪贴板，但在输入或文本区域中还有另一个文本......让我解释一下:

我有这段代码(来自 stackoverflow 上的另一个问题)，但我想更进一步。假设文本区域中出现的代码不是我要复制到剪贴板的代码，而是复制包含该代码的 url。这是代码:

class CopyExample extends React.Component {

  constructor(props) {
    super(props);

    this.state = { copySuccess: '' }
  }

  copyToClipboard = (e) => {
    this.textArea.select();
    document.execCommand('copy');
  
    e.target.focus();
    this.setState({ copySuccess: 'Copied!' });
  };

  render() {
    return (
      <div>
        {
         document.queryCommandSupported('copy') &&
          <div>
            <button onClick={this.copyToClipboard}>Copy</button> 
            {this.state.copySuccess && '✓'}
          </div>
        }
        <form>
          <textarea
            ref={(textarea) => this.textArea = textarea}
            value='ABC123CD'
          />
        </form>
      </div>
    );
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但我想要的不是复制此代码“ABC123CD”，而是复制带有该代码的 url，如下所示:“https://some-url/abc123cd/code”

Answer 1

您可以在 .select() 之前操作期望值

this.textArea.value = `https://some-url/${this.textArea.value}/code`;
this.textArea.select();

演示代码和框