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

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

以上