У меня есть следующая функция для копирования строки текста:
function copyText(str) {
console.log(str);
let tmp = $('<input type="text">').appendTo(document.body);
tmp.val(str.toString() );
tmp.select();
document.execCommand('copy');
tmp.remove();
}
Эта функция отлично работает как при вызове из консоли, так и при вызове с помощью нажатия кнопки.
I есть функция, которая копирует цвет:
function copyColor(elm) {
let hex = $(elm.parentElement).find('span').html();
console.log('copyText("' + hex + '")' );
copyText(hex);
}
Эта функция вызывается при нажатии кнопки. Кнопка передает себя в качестве параметра. Я динамически создаю кнопки (каждая представляет новый «элемент цвета»). Вот HTML, который динамически вставляется с jQuery:
'<button class="btn copy-btn no-color" title="Copy" data-toggle="popover" onclick="copyColor(this);"><i class="fas fa-copy"></i></button>'
Все это:
$('#' + mode + '-modal .modal-body').prepend(
'<div class="' + mode + '-item color-item">'
+ '<button class="btn open-btn no-color" title="Open Color" data-toggle="popover" onclick="openColor(this, \'' + mode + '\');"><i class="fas fa-external-link-alt"></i></button>'
+ '<input class="form-control color-name" type="text" placeholder="Name your color (optional)" value="' + name + '">'
+ '<br class="mobile-only">'
+ '<div class="color-preview" style="background-color:' + hex + ';"></div>'
+ '<span>' + hex + '</span>'
+ '<button class="btn copy-btn no-color" title="Copy" data-toggle="popover" onclick="copyColor(this);"><i class="fas fa-copy"></i></button>'
+ '<button class="btn link-btn no-color" title="Get Link" data-toggle="popover" onclick="copyColorLink(this);"><i class="fas fa-link"></i></button>'
+ '<button class="btn delete-btn no-color" title="Remove" data-toggle="popover" onclick="removeColor(this);"><i class="fas fa-trash"></i></button>'
+ '<i class="fas fa-arrows-alt" style="cursor:move;" title="Drag to Change Order" data-toggle="popover"></i>'
// + '<button onclick="copyText(\'hi\')">hi</button>'
+ '</div>'
);
где mode, hex и name все параметры этой функции.
Каждый раз, когда я нажимаю, чтобы скопировать цвет, он вызывает функцию copyColor(), получает правильную строку, вызывает функцию copyText(), получает правильную строку и запускает без ошибок, однако он не может редактировать мой буфер обмена. При вызове этой функции из консоли с точно такой же строкой она работает, и при создании кнопки stati c для копирования цвета, например:
<button onclick="copyText('hi')">hi</button>
затем это тоже хорошо работает. Я также попытался динамически добавить одну из этих кнопок:
+ '<button onclick="copyText(\'hi\')">hi</button>' в мой код, который внедряет HTML, и он не работает.
Другие динамически создаваемые кнопки, показанные выше, также вызывают функции и передают себя в качестве параметра и работают нормально, например кнопка удаления, вызывая функцию removeColor() с параметром this.
Наконец, я попытался присвоить кнопкам динамические c идентификаторы, например:
'<button id="copy-btn-'+ nextID +'" et c ...
Где nextID - это значение I инкремент, и я немедленно добавляю прослушиватель onclick для этой указанной c кнопки после ее создания:
$('#copy-btn-'+nextID).click(function() {
copyText('hello');
});
nextID++;
Я попытался создать новую функцию копирования, которая принимает только строку, и вместо передачи элемент Я просто передаю копируемую строку:
function copyColorNew(hex) {
console.log('copyText("' + hex + '")' );
copyText(hex);
}
и вот соответствующая часть вставленного кода кнопки:
onclick="copyColorNew(\''+hex+'\');">
, и она правильно вызывает функцию, передает правильную аргументов и не может скопировать строку.
У меня нет повторяющихся имен функций, все файлы включены правильно, я жестко обновил страницу, все переменные находятся в соответствующей области видимости, и я ' мы никогда есть ошибки Я также пропустил десятки других довольно неубедительных экспериментов, которые я сделал.
У меня совершенно нет идей, и я тратил несколько часов в день на несколько дней на эту проблему. Я хорошо знаю, как скопировать строку в javascript, я хорошо знаю, как создать кнопку и добавить ее динамически, и я хорошо знаю, как назначить кнопке прослушиватель по щелчку, который передает себя как параметр. У меня не было проблем с этими вещами в прошлом, и я до сих пор не везде в этом коде, как я подробно описал выше.
Единственное, о чем я могу думать, это проблема безопасности, позволяющая динамически разрешать создал DOM-элементы для вызова функций, которые обращаются к буферу обмена, но я даже не вставляю данные.
Еще раз, кнопки на странице stati c HTML могут правильно копировать «привет мир», динамически вставленные не могут скопировать «привет мир».