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);
	}
};