シンプルなクリップボードモジュールを作りました。

DOM Element を渡すと、その中身をクリップボードにコピーするモジュール clipeace を作りました。

 

クリップボードのモジュールとしては、既に clipboard.js という便利なモジュールがあります。

 

しかし、clipboard.js の使い方が自分の好みではなかったので、自分なりに少し工夫してみました。

 

YuG1224/clipeace

Contribute to clipeace development by creating an account on GitHub.

 

Install

npm install --save clipeace

 

Usage

const clipeace = require('clipeace');
const target = document.getElementById('target');

clipeace(target)
  .then((res) => {
    // suceess
  }).catch((err) => {
    // failure
  })

コピーしたい DOM Element を引数に渡すだけで、クリップボードに文字列がコピーされます。

また、then / catch でそれぞれ実行結果が返却されます。

Detail

clipeace の中身は以下の通り。

'use strict';
require('babel-polyfill');

const clipeace = function(elem) {
  return new Promise((resolve, reject) => {

    let text = undefined;
    let copy = false;

    if (['INPUT', 'TEXTAREA'].includes(elem.nodeName)) {
      // フォームにフォーカスを当てて、フォームの中身を選択

      elem.focus();
      elem.setSelectionRange(0, elem.value.length);
      text = elem.value;

      // 選択部分をクリップボードにコピーする
      copy = document.execCommand('copy');

      // フォーカス解除
      elem.blur();

    } else {
      // Elementの中身を選択

      const selection = window.getSelection();
      const range = document.createRange();

      range.selectNodeContents(elem);
      selection.removeAllRanges();
      selection.addRange(range);
      text = selection.toString();

      // 選択部分をクリップボードにコピーする
      copy = document.execCommand('copy');

      // 選択解除
      selection.removeAllRanges();
    }

    // response 作成して返却
    const res = {
      text: text,
      copy: copy
    };

    if (copy) resolve(res);
    else reject(res);

  });
};

module.exports = clipeace;

CodePen

以上