SQLの窓

2016年08月12日


clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。

Google Chrome の Flash 完全排除に対応 : JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項 では、具体的にその方法を自分で用意して使用しています。その方法のほうが、メンテナンスし易いと思う場合はそちらを使えばいいと思いますが、簡単に実装したいのならばこちらの方法です。

実装コード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
var clipbpardText = "";

$(function(){
	var clipboard = 
	new Clipboard('.clipboard_btn' , {
		text: function(trigger) {
        		return clipbpardText;
		}
	});

	clipboard.on('success', function(e) {
	    alert("クリップボードにコピーしました");
	});

	$("#button1").on("click", function(){
		var work = prompt("入力値をクリップボードにセット")
		clipbpardText = work;
	})
});
</script>
<button type="button" class="clipboard_btn" id="button1">実行</button>

clipboard.on は特に必要ではありませんが、テストする場合は解り易くなると思います。

まず、イベントの開始となるクリックイベントでコピーさせたい文字列をグローバル変数である clipbpardTextにセットします。

その後、new Clipboard で定義した text に対するファンクションが起動されて、コピーさせたい文字列(ここでは clipbpardText)を return するだけで実装完了です。


この処理は内部のソースコードを読むとたぶん以下の部分だと思われます
ClipboardAction.prototype.selectFake = function selectFake() {
            var _this = this;

            var isRTL = document.documentElement.getAttribute('dir') == 'rtl';

            this.removeFake();

            this.fakeHandlerCallback = function () {
                return _this.removeFake();
            };
            this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || true;

            this.fakeElem = document.createElement('textarea');
            // Prevent zooming on iOS
            this.fakeElem.style.fontSize = '12pt';
            // Reset box model
            this.fakeElem.style.border = '0';
            this.fakeElem.style.padding = '0';
            this.fakeElem.style.margin = '0';
            // Move element out of screen horizontally
            this.fakeElem.style.position = 'absolute';
            this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
            // Move element to the same position vertically
            this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';
            this.fakeElem.setAttribute('readonly', '');
            this.fakeElem.value = this.text;

            document.body.appendChild(this.fakeElem);

            this.selectedText = (0, _select2.default)(this.fakeElem);
            this.copyText();
        };
textarea を作成して、-9999px で画面から隠しているようです。




【JavaScript ライブラリの最新記事】
posted by lightbox at 2016-08-12 20:20 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり