選中|復制文本

今天學習了下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：

方法二也能直接實現。

 

方法三：原生實現

html：

 js:

 

總結：能實現復制的方法還有很多，具體看自己的需求而定，兼顧好兼容問題，我比較習慣第一種方法，還有其他延生的也可以學習下，比如說復制圖片，鏈接還有除輸入框以外的，也可以參考：https://www.baidu.com/link?url=yW27j3Nl2VhkXiOjf060Qq2C8hymmbiLFeIz5UaWuMnxEHtH6136rY4D_LIO4YE5Ra0SAwyV_1MVAbQC9k-qm_&wd=&eqid=d1ded2820002897b000000045c4acbca