javascriptのクリップボードにコピーでめっちゃくちゃ詰まったからメモしとく

#とりあえずコード載せます

See the Pen javascript cripboard copy by 中村＠ガウチャ (@_nakashimamura) on CodePen.

<input type="text" id="target_text" value="ここにコピーしたい値が入るよね" onfocus="this.select();" readonly>
<button id="copy_btn">コピー</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('#copy_btn').on('click', function() {
		var target = null;
		var p = null;
		window.getSelection().removeAllRanges();
		if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
			target = document.querySelector('#target_text');
			target.contentEditable  = true;
			target.readOnly = false;
		} else {
			p = document.createElement('p');
			p.setAttribute('id', 'target')
			document.body.appendChild(p);
			p.innerHTML = $('#target_text').val();
			target = document.querySelector('#target');
		}
		var range = document.createRange();
		range.selectNode(target);
		window.getSelection().addRange(range);
		document.execCommand("copy");
		if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
			target.contentEditable  = false;
			target.readOnly = true;
		} else {
			document.body.removeChild(p);
		}
		window.getSelection().removeAllRanges();
	});
});
</script>

これで一通り動くはず。なんです。
いいコードじゃないのはわかっているんだ、が・・

何で詰まったのか。。。

いまだ理由はわからないんですけど、発火イベントにtouchstartを使わず、click指定したら無事、私が確認した最新ブラウザたちで動きました。

スマホ対応もかねて、jsで.on('click',function(){});ってするときに
スマホならtouchstartを、
PCならclickを、ってやってたんです。
参考サイト様：jQueryで、on()にclickとtouchstartを併記したら、スマホでのタップイベントの動作がおかしくなった

だけど、スマホで一切のコピーが動かない事態が起きたんです。
touchstartで発火させたイベントだと、document.execCommand("copy");が動かない・・・
**いつもfalseが返ってくる・・・**なんだこれ・・・でした。
理由がわからないけれど、動いたからいいや状態

とりあえずちょっとだけコード説明

iOSと他ブラウザで分けている理由としてはiOS10の改悪アップデートからクリップボードにコピーの制約がめんどくさくなってためです。
いや、長いことjs書いてなかったから本気で無知すぎました。。

詳しくはこちら：Copy to clipboard using Javascript in iOS - Stack Overflow
EIGO DAYO

要約すると、

• input/textareaじゃないとコピー実施できないよ
• formタグの外にいる場合は、contenteditable属性(編集できること）で
• readonly属性(読み込み専用)だったらダメだよ
• コピー対象は選択範囲内にないとダメだよ

って言われたためです。

じゃあiOS用の記述だけで動くかな？と思って試したら、firefoxとIE/Edgeが死にました

でも以下一行で動くようになったのです・・が・・・

target.select();

そうするとどうなったかっていうと、またiOS safariちゃんがごにょごにょしたんですよ。
それから、結果ああなりました(省略)

ほかのコードの説明に関してはネットに山のように落ちているので、ご参照くださいまし。
かしこ。