UIを考える上で、コピペのための機能が欲しくなったので用意しました。
検索すると色々出てくるのですが、使い勝手が悪いというかなんというか。
実用に堪えるものがなかったので自作しました。
クラス名co2cl (copy to clipboard)を付与した要素を対象に動作します。
動作時にカーソルが一瞬変わります。
エラー補足できなさそうなので判定はありません。
非SSL用コードです。
HTML部
<span class="co2cl">テキスト</span> <form><input type="text" class="co2cl" value="インプット"></form>
JvaScript部
$(function(){ //console.log(co2cl);
co2cl.load();
});
var co2cl = {
version: '2023-12-07',
//-------- LOAD
load: function(){
var target = $('.co2cl'); //console.log(target);
target.each(function(i, elm) { //console.log(i, elm);
// コピー用ボタン
var html = ''
+'<button'
+' type="button"'
+' class="co2cl_btn"'
+' onclick="co2cl.run(this)"'
+'>'
+'copy'
+'</button>';
$(elm).after(html);
});
},
//-------- RUN
run: function(caller){ //console.log(target);
var target = $(caller.previousElementSibling); //console.log(target);
var tagName = target.get(0).tagName; //console.log(tagName);
// フォーム部品とそれ以外で取得先が異なる
var value = (tagName == 'INPUT' || tagName == 'TEXTAREA')
? target.val()
: target.text(); //console.log(value);
// コピペ用フォーム
var html = ''
+'<form>'
+'<textarea'
+' id="co2cl_temp"'
+' class="co2cl"'
+' style="position:absolute;left:-9999px"'
+'>'
+'</textarea>'
+'</form>';
$('BODY').append(html);
var temp = $('#co2cl_temp'); //console.log(temp);
temp.html(value);
temp.select();
document.execCommand('copy');
$(temp).remove();
//---- カーソル変更
$(caller).css('cursor','wait');
setTimeout(function(){$(caller).css('cursor','pointer');}, 200);
}
};
