[Client] Improve usability

1 files changed, 25 insertions, 5 deletions

diff --git a/src/client/app/common/scripts/copy-to-clipboard.ts b/src/client/app/common/scripts/copy-to-clipboard.ts
index 3d2741f8d7..ab13cab970 100644
--- a/src/client/app/common/scripts/copy-to-clipboard.ts
+++ b/src/client/app/common/scripts/copy-to-clipboard.ts
@@ -2,12 +2,32 @@
  * Clipboardに値をコピー(TODO: 文字列以外も対応)
  */
 export default val => {
-	const form = document.createElement('textarea');
-	form.textContent = val;
-	document.body.appendChild(form);
-	form.select();
+	// 空div 生成
+	const tmp = document.createElement('div');
+	// 選択用のタグ生成
+	const pre = document.createElement('pre');
+
+	// 親要素のCSSで user-select: none だとコピーできないので書き換える
+	pre.style.webkitUserSelect = 'auto';
+	pre.style.userSelect = 'auto';
+
+	tmp.appendChild(pre).textContent = val;
+
+	// 要素を画面外へ
+	const s = tmp.style;
+	s.position = 'fixed';
+	s.right = '200%';
+
+	// body に追加
+	document.body.appendChild(tmp);
+	// 要素を選択
+	document.getSelection().selectAllChildren(tmp);
+
+	// クリップボードにコピー
 	const result = document.execCommand('copy');
-	document.body.removeChild(form);
+
+	// 要素削除
+	document.body.removeChild(tmp);
 
 	return result;
 };