Yêu cầu thg 10 9, 2018 3:16 SA 945 1 2
  • 945 1 2
+2

document.execCommand("copy") not working !!!!

Chia sẻ
  • 945 1 2
            async copyInvitationUrl() {
                try {
                    let result = await ManageGroupService.copyInvitationUrl(this.dataGroup.group_id);
                    let invitationUrl = result.data.result;
                    let inputTemp = document.createElement("input");
                    inputTemp.value = invitationUrl;
                    document.getElementById('modal-footer-group').appendChild(inputTemp);
                    inputTemp.select();
                    document.execCommand("copy");
                } catch (error) {

                }
            }

Em đang làm 1 chức năng copy text từ input lưu vào Clipboard. Vấn đề xảy ra là khi dưới js tạo element input rồi appendChild thì không lưu vào Clipboard được.

Em nghĩ vấn đề đang ở chỗ tạo element rồi appendChild lên thằng DOM nó k hiểu được cái element của mình để copy vì em đã test get 1 text từ input có sẵn bằng hàm select() rồi dùng document.execCommand("copy") thì được.

Nhưng cũng lạ nếu DOM nó k hiểu được cái input được create từ element thì sao lại bôi đen được như hình ?

Có anh chị nào biết nguyên nhân không cho em xin solution ạ. Thank you so much !!!

Avatar Hải Hà @HaiHaChan
thg 10 9, 2018 4:19 SA

The document.execCommand() method is not supported in IE8 and earlier.

Avatar Quiet @simple1805
thg 10 9, 2018 4:22 SA

@HaiHaChan I know and i using Chrome. I think browser is not problem in my issue.

Avatar Hải Hà @HaiHaChan
thg 10 9, 2018 5:06 SA

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard do c k sử dụng button nên nó bị hạn chế quyền ghi vào Clipboard

Avatar Tran Duc Thang @thangtd90
thg 10 9, 2018 5:32 SA

Em nghĩ vấn đề đang ở chỗ tạo element rồi appendChild lên thằng DOM nó k hiểu được cái element của mình để copy

Anh thử thì vẫn copy được từ một DOM mới được tạo ra em ạ 🤔

Anh mở trang https://google.com rồi copy đoạn code dưới đây paste vào console thì vẫn thấy copy được vào clipboard

invitationUrl = '1234567';
inputTemp = document.createElement("input");
inputTemp.value = invitationUrl;
document.getElementById('gs_lc0').appendChild(inputTemp);
inputTemp.select();
document.execCommand("copy");

nên có lẽ vấn đề không phải ở chỗ appendChild đâu 😄

2 CÂU TRẢ LỜI


Đã trả lời thg 10 9, 2018 5:27 SA
+3

Mình nghĩ vấn đề nằm ở cái async/await bạn gọi. Bạn thử console.log(result) xem có data trả về không? Mình đoán nó return undefined nên không copy được gì vào clipboard cho bạn. Chứ cái đoạn xử lý copy vào clipboard ở bên dưới là đúng rồi đấy bạn.

Chia sẻ
Avatar Quiet @simple1805
thg 10 9, 2018 5:44 SA

Đúng là do async/await anh ạ, nhưng hơi dị, nó trả về giá trị thì em mới gán được value cho input. Thực tế là trên input có nhận được giá trị của result rồi. Mà em xóa cái async/await thì lại chạy được

thg 10 9, 2018 6:03 SA

@huusu1996 Mình thấy để cái async kia không cần thiết, bạn thử như này xem:

const copyToClipboard = value => {
  let inputTemp = document.createElement("input");
  inputTemp.value = value;
  document.getElementById('modal-footer-group').appendChild(inputTemp);
  inputTemp.select();
  document.execCommand("copy");
  document.removeChild(inputTemp);
}

const handleCopyURL = groupID => {
  return ManageGroupService.copyInvitationUrl(groupID)
    .then(({ data: { result } }) => copyToClipboard(result))
}
Avatar Quiet @simple1805
thg 10 9, 2018 6:45 SA

Em fix được rồi (lol) Em viết cái service ManageGroupService.copyInvitationUrl ở chỗ khác cho đỡ ảnh hưởng cái async/await (lol). Cảm ơn anh ạ

Đã trả lời thg 5 17, 2019 9:10 SA
0

sửa được chưa bạn ?

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí