Копировать выбранное поле ввода с JavaScript не работает должным образом - PullRequest
0 голосов
/ 08 сентября 2018

Для моей культуры программирования я экспериментирую с аудио-тегами html и аудиоисточниками, а также с буфером обмена ОС. Уже 3 дня я пытаюсь решить проблему следующим образом.

Положение

У меня есть html-страница на сервере с js, в которой есть куча кода. JS делает много вещей, среди прочего генерирует два ввода, вставляя туда, где мне нужен соответствующий HTML:

текстовый ввод:

<input type="text" id="titleToCopy" value="" />

and a button:

    <input type="button" value="Copy" onclick="copyTitleOnClipboard()"/>


Into the js code there are also these two functions

function execThings() //This execute some operations and also calls other functions
{
    console.log(arguments.callee.name);
    var dest = document.getElementById(myplayerID); // Gets my player by its ID
    var osrc = getOriginalPlayer().src;
    dest.src = osrc;
    updateTitleToCopy();
    copyTitleOnClipboard();
    stopOriginalPlayer();
}


function copyTitleOnClipboard() // This function select and copies to the Operative System clipboard the content of the related text input
{
    console.log(arguments.callee.name);
    var titleInput = document.getElementById("titleToCopy");
    titleInput.focus(); // The function works good with or without this line
    titleInput.select();

    var r = document.execCommand("copy");
    r = r === true ? "has been" : "not";

    console.log("Title " + r + " copied to clipboard");
}

Для отладки я добавил в обе функции строку

console.log(arguments.callee.name);

Таким образом, на консоли Chrome отображается имя функции, поэтому я могу проверить, запускается ли она.

Поведение

  • Если я нажму кнопку, соответствующая функция onclick copyTitleOnClipboard () выполнится и скопирует значение ввода в буфер обмена ОС.
  • Если я напишу от руки название функции copyTitleOnClipboard () в консоль Google Chrome, она тоже будет работать.

Для меня это означает, что функция copyTitleOnClipboard () сама по себе работает правильно. Фактически на консоли в обоих случаях я получаю отладочную информацию благодаря строке:

console.log("Title " + r + " copied to clipboard");

, который, как и ожидалось, возвращает результат Заголовок скопирован в буфер обмена

И если я вставлю в другое место (например, в блокнот) содержимое буфера обмена, результатом будет значение ввода текстового поля, как и ожидалось.

проблема

Проблема заключается в том, что когда выполнение связано с другой функцией execThings () , которая вызывает функцию copyTitleOnClipboard () , она больше не работает: copyTitleOnClipboard () функция выполняется на самом деле на консоли отображается ее имя, как и ожидалось, но я также получаю сообщение об ошибке: Заголовок не скопирован в буфер обмена и если я вставлю содержимое буфера обмена в блокнот, оно не будет содержать значение текстового поля, которое должно быть скопировано, или будет пустым

Вопросы

  • Почему вызов функции copyTitleOnClipboard () из другой функции не работает, как если бы я вызывал ее, нажимая кнопку или руками консоли Chrome?
  • Как мне решить проблему?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Мне удалось воспроизвести проблему, с которой вы столкнулись.

Оформить заказ здесь: https://jsfiddle.net/t1pe6zw8/

Откройте эту ссылку, подождите 5 секунд и посмотрите, что произойдет.

Вот объяснение поведения:

Здесь я предполагаю, что функция execThings() вызывается каким-либо событием, которое не вызывается действием пользователя.

Основной метод JS document.execCommand (), требует, чтобы он был запущен пользователем взаимодействие, чтобы предотвратить веб-страницы возиться с буфером обмена без ведома пользователя. Это функция безопасности и является применяется каждым браузером.

$(document).ready(function(){
    setTimeout(function(){ execThings(); }, 5000);
});

Этот код выше, как только документ готов, запускает функцию execThings() через 5 секунд, и, поскольку он запускается без действий пользователя, он не может скопировать текст.

Теперь, если вы нажмете кнопку Click Me to Exec Things на ссылке JSFiddle выше, она вызовет ту же функцию execThings() и сможет скопировать текст.

Более подробную информацию вы можете получить здесь: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Return_value

Теперь я не уверен, каковы ваши варианты использования, но вам нужно будет получить действие пользователя, чтобы скопировать текст.

Надеюсь, это поможет!

0 голосов
/ 08 сентября 2018

eeeehhhmmm ...

Сэр, я скопировал ваш код и заменил copyTitleOnClipboard() на execThings() в onclick="copyTitleOnClipboard()" кнопки .... И это работает правильно, execThings() и copyTitleOnClipboard() печатаются в консоли и значение поля ввода копируется в буфер обмена, и я проверил, что ...

это ясно говорит о том, что проблема в том, что другой код опущен в вопросе и заменен комментарием //some other code. Пожалуйста, включите этот код в дополнение к коду вопроса, потому что я думаю, что-то там портит функцию execThings().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...