react---之複製輸入框文本內容

今天學習了下js如何實現複製input輸入框中的內容，學習到了兩種方法，這邊記錄下！

方法一：Clipboard.js

###安裝clipboard插件

npm insatll clipboard --save

或者你能夠直接下載壓縮包本地引入

zip：https://codeload.github.com/zenorocha/clipboard.js/zip/master

 

頁面代碼

  render() {
    return (
        <div  className="copy-container>
            <p>點擊複製後在右邊textarea CTRL+V看一下</p>
            <input
            type="text"
            id="inputText"
            ref={input => (this.inputText = input)}
            value="這邊是你要複製的內容"
            />
            <input
            type="button"
            id="btn"
            value="複製"
            ref={copy => (this.copy = copy)}
            onClick={this.clipBoard}
            className="copy"
            />
            <textarea rows="4" />
        </div>
    );
  }

 

複製實現

  // method of copy input text
  clipBoard = () => {
    try {
      if (document.execCommand("copy", false)) {
        let clipBoard = new Clipboard(this.copy, {
          text: () => this.inputText.value
        }); // 實例化 Clipboard對象;
        clipBoard.on("success", function(e) { // 複製成功
          console.log(e);
        });
        clipBoard.on("error", function(e) { // 複製失敗
          console.log(e);
        });
      } else {
        throw new Error('Invalid "target" value, use a valid Element'); // 不支持則拋出異常
      }
    } catch (err) {
      throw new Error('Invalid "target" value, use a valid Element'); // 拋出異常
    }
  };

注意：

若是你這邊text不想寫，那麼還有另一種寫法：

直接實例化clipboard

let clipBoard = new Clipboard(this.copy); // 實例化 Clipboard對象;　　

 可是你html頁面上的複製按鈕要加上兩個屬性，以下圖，效果也是同樣的

執行後，頁面效果：

如上圖是否是實現了，可是clipborad仍是會有兼容問題的，具體參考連接：

https://clipboardjs.com/

 

方法二：不引入插件直接實現

  // 複製輸入框中的值
  copyInputValue = () => {
    const inputText = document.getElementById("inputText"); // 獲取要被拷貝的值的dom對象
    const currentFocus = document.activeElement; // 獲取頁面上正在被選中的對象
    inputText.focus();
    inputText.setSelectionRange(0, inputText.value.length); // 方法能夠從一個被 focused 的 <input> 元素中選中特定範圍的內容。
    document.execCommand("copy", true);
    currentFocus.focus();
  };

html：

方法二也能直接實現。

總結：能實現複製的方法還有不少，具體看本身的需求而定，可是會有兼容問題，我比較習慣第一種方法，還有其餘延生的也能夠學習下，好比說複製圖片，連接還有除輸入框之外的，也能夠參考：https://www.baidu.com/link?url=yW27j3Nl2VhkXiOjf060Qq2C8hymmbiLFeIz5UaWuMnxEHtH6136rY4D_LIO4YE5Ra0SAwyV_1MVAbQC9k-qm_&wd=&eqid=d1ded2820002897b000000045c4acbca