document.execCommand('copy') not working on Chrome
On Chrome only document.execCommand(‘copy’) returns true but does not copy the text, it clears the clipboard.
I can’t find anyone who’s had the same problem, there are a lot of similar questions but please don’t mark this as a duplicate unless it really is.
- I am calling selection.removeAllRanges() before selection.addRange() .
- selection.getRangeAt(0).cloneContents() returns a fragment containing the correct text
- The text in the textarea doesn’t appear selected
- If I call textarea.select() before document.execCommand(‘copy’) the text appears selected and gets coppied to the clipboard. I don’t want to do this because it focuses the textarea and causes the page to scroll.
- Tested on Chrome 61 and 63, MacOS
- Working in Safari
Here’s my code (used within a click event listener)
https://codepen.io/jakecr/pen/XVXvKz
3 Answers 3
I am not really clear as to what really happens here.
It seems there is a mismatch as to what should be used between the value and the textContent properties of your textarea.
Chrome seems to always use value , while Firefox uses textContent .
Since chrome doesn’t look at the textContent property, Range#selectNodeContents will select nothing on this browser.
However, you can use Range#selectNode which should return the same result in this case, and will workaround the issue.
For people reading this question in 2020, if you’re having trouble with document.execCommand(‘copy’) , you may want to try using the Clipboard API.
There are two ways browser extensions can interact with the system clipboard: the Document.execCommand() method and the modern asynchronous Clipboard API.
Also per Mozilla, document.execCommand() is now obsolete:
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
With the Clipboard API, writing text to the clipboard is particularly easy:
Почему не работает document.execCommand("copy")?
document.execCommand(«copy») работает :
Однако, если я открою всплывающее окно, document.execCommand(«copy») не сработает
Кто-нибудь знает причину этого, пожалуйста?
Вот мой весь код:
2 ответа
Вот мой рабочий пример функции copyTextToClipboard . Попробуйте добавить вызов textArea.focus .
Вот причина проблемы:
Следующий код не работает, когда есть наложение документа. Например, когда вызывающий объект находится в div с более высоким z-индексом или что-то в этом роде. Я не уверен, что именно вызывает сбой этого кода. Но это, похоже, связано с наложениями, фокусируемыми элементами или чем-то еще. Дело в том, что, когда тело документа скрыто, созданная текстовая область не может фокусироваться и не работает.
Вместо того, чтобы добавлять текстовую область в тело документа, ее можно добавить к самой вызывающей программе. Следовательно, она всегда будет на переднем плане. Это предполагает, что текст для копирования короткий, так что выполнение выполняется достаточно быстро, чтобы пользователь не заметил создание и удаление текстовой области.
Почему document.execCommand («вставка») не работает в Google Chrome?
У меня проблема с моим расширением. Я осмотрелся и нашел, что мне нужно сделать, я просто не могу заставить его работать.
До сих пор у меня было:
Появляется предупреждение, но ничего не было вставлено.
У меня есть ощущение, что это часть document , которая нуждается в изменении, но я не могу найти что.
5 ответов
Вы не можете выполнить его на обычной странице, только на исходной странице.
В Chrome использовался экспериментальный API-интерфейс буфера обмена, но он был удален в Chrome 13.
execCommand не работает
Суть проблемы: есть поле textarea, вверху ссылки. При клике на ссылку должен форматироваться текст, но этого не происходит. Вот код:
Ответы (1 шт):
Во-первых, для работы execCommand() необходимо включить designMode или contentEditable — посмотрите, например, в доках Мозиллы. Во-вторых, вы не можете таким образом форматировать текст в textarea — этот элемент всегда хранит только текст. Однако вы можете форматировать текст, например, в диве (перед щелчком по ссылке выделите текст в editDiv ):