エイチデザイン / コピー

コピー

テキストをクリップボードにコピーする機能

CODE
DEMO

説明
使い方
解説

準備中

[copyMod]のclass追加で内包する文字列をコピーする。
[data-copy]属性を追加すれば指定の値をコピーする。

準備中

ライブラリを導入する前に

html

css

.copyMod {cursor: pointer;}
#copyMod-alert {
  width: 100%;
  height: 50px;
  padding: 0 24px;
  line-height: 50px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  box-sizing: border-box;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
}
.copyMod-alert-txt {display: flex;}
.copyMod-alert-tar {
  max-width: calc(100% - 20em - 8px);
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

jQuery

$bd.on('click','.copyMod',function(){
  if($('#copyMod-alert')[0]){$('#copyMod-alert').remove();}

  var $copyarea = $('');
  var copyTxt = $(this).data('copy');
  if(copyTxt == undefined){var copyTxt = $(this).text();}
  var $copyalert = $('[ '+copyTxt+' ]クリップボードにコピーしました');

  $copyarea.text(copyTxt);
  $bd.append($copyarea).append($copyalert);
  $copyarea.select();
  document.execCommand('copy');
  $copyarea.remove();

  $copyalert.fadeIn();
  setTimeout(function(){
    $copyalert.fadeOut().queue(function(){
      this.remove();
    });
  },1000);
});

サンプル 1

サンプル 2

TOP

html

css

jQuery