【javascript】クリックしたらコピーをさせる方法(新)

前回、execCommandを使ってクリックしたらコピーの機能を実装させたんだけど、execCommandが廃止みたいなので別の書き方の備忘録

execCommand()は廃止

execCommand()は廃止みたいであまり使わない方が良いみたい

なので、HTML5でClipboard APIを使って実装する

<input id="input" type="text" value="コピー対象の文言">
<button id="copy">Copy</button>

<script>
function copy() {
	var copyText = document.querySelector("#input").value;// コピー対象のテキストを取得
	navigator.clipboard.writeText(copyText).then(
	function(){
		alert("「"+copyText+"」をコピーしました"); // success
	})
	.catch(
		function() {
			alert("コピーに失敗しました"); // error
		}
	);
}
document.querySelector("#copy").addEventListener("click", copy);
</script>

というように書くことができる
だけど、IEには対応していない

IEでClipboard APIを対応させる方法

ieにはnavigatorオブジェクトとWindowオブジェクトにプロパティとしてclipboardが実装されていないのでWindowオブジェクトのプロパティclipboardDataを使って実装する必要があるんだけど、まだclipboardDataは実験的な機能みたい

function copy() {
	var userAgent = window.navigator.userAgent.toUpperCase();// ブラウザ判定用
	var copyText = document.querySelector("#input").value;// コピー対象のテキストを取得
	if(userAgent.indexOf('MSIE') === -1 && userAgent.indexOf('TRIDENT') === -1) {
		// ie以外の処理(前述のコード)
	}else{
		window.clipboardData.setData("text", copyText);
		alert("「"+copyText+"」をコピーしました"); // success
	}
}
document.querySelector("#copy").addEventListener("click", copy);

まだ、完全に実装された機能ではないようなので、ieの時はClipboard APIが対応してなかったらexecCommandを使った書き方にするように条件分岐したほうがいいのかも

if (!navigator.clipboard){// Clipboard APIが対応していない時
    // execCommandを使った書き方
} else{// 対応している時
	// Clipboard APIを使った書き型
}