Нажмите, чтобы скопировать html-код элемента
Итак, в основном я пытаюсь создать свою собственную шпаргалку для начальной загрузки, которая позволила бы мне автоматически копировать html-код элемента в буфер обмена, когда я нажимаю на него или на определенную кнопку.
Немного похоже на этот сайт: https://hackerthemes.com/bootstrap-cheatsheet/
Я знаю, как копировать текст, но как получить доступ к актуальному html-коду и скопировать его, чего я не знаю.
Это код, который я использую для копирования текста:
<input type = "text" value = "Hello World" id = "myInput">
<button onclick = "myFunction()">Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
}
</script>был бы очень признателен за помощь ^^
Код, который вы уже используете, позволяет вам ввести что угодно, а затем скопировать это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Используйте outerHTML, чтобы получить html в виде строки.
function myFunction() {
//getting the html
var copyText = document.getElementById("myInput").outerHTML;
copyText.select();
document.execCommand("Copy");
//remove value
alert("Copied the text: " + copyText);
}
Я знаю, что jQuery - отличный инструмент, но этот вопрос касается только js.
Ой, извините, я не видел, что это был только JS. Вы все еще можете использовать свойство outerHTML: developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML Я соответствующим образом скорректирую ответ.
Для доступа и изменения слов внутри div или любого элемента на самом деле это .innerHTML элемента.
function myFunction() {
var button = document.getElementById("Button");
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
button.innerHTML = "Copied!";
}<input type = "text" value = "Hello World" id = "myInput">
<button onclick = "myFunction()" id = "Button">Copy text</button>Это всего лишь быстрый пример, показывающий, что .innerHTML может изменять текст внутри кнопки. Если вы больше любите jQuery (как и я), вы можете использовать функцию .appendTo(), которая является тем же самым, но в jQuery. Я бы не рекомендовал вам это, поскольку в js уже есть встроенная функция для этого.
Теперь, чтобы скопировать код,
function myFunction() {
var text = document.getElementById("myInput");
var copyText = document.getElementById('myInput').outerHTML;
var textbox = document.getElementById('html');
textbox.value = copyText;
var button = document.getElementById("Button");
textbox.select();
document.execCommand("Copy");
alert("Copied the text: " + text.value + " HTML code!");
button.innerHTML = "Copied!";
}#html {
visibility: hidden;
}<input type = "text" value = "Hello World" id = "myInput">
<button onclick = "myFunction()" id = "Button">Copy text</button>
<input type = "text" value = "" id = "html">Теперь этот второй код берет исходный код и копирует его.
OP запрашивает, чтобы весь элемент html (ввод) был скопирован как строка, а не текст внутри ввода.
Чтобы скопировать текст outerHtml, вам нужно взять его и поместить в textbox, чтобы вы могли выбрать его, а затем скопировать. Это довольно хакерский способ сделать это, но если вы хотите сделать это как хакерские темы, вы можете поместить HTML в disabled, выбираемый textbox, который красиво оформлен с помощью CSS.
<html>
<head>
<script>
function myFunction() {
// get the OUTER html of the element you want to copy
var text = document.getElementById('myInput').outerHTML;
// put that outerHTML into another textbox for copying
var tempTextbox = document.getElementById('copyingText');
tempTextbox.value = text;
tempTextbox.focus();
tempTextbox.select();
document.execCommand("Copy");
}
</script>
</head>
<body>
<input type = "text" id = "copyingText" />
<input type = "text" value = "Copy Test" id = "myInput" />
<button onclick = "myFunction()">Copy text</button>
</body>
</html>Вы не можете выполнять команды копирования / вырезания для элементов документа.
document.execCommand("Copy"); дает вам только входное значение, которое вы назвали select();, поэтому я предлагаю вам сделать следующее:
function myFunction() {
var copyinput = document.createElement('input');
copyinput.value = document.getElementById("myInput").outerHTML;
copyinput.select();
document.execCommand("Copy");
alert("Copied the text: " + copyinput.value);
}<input type = "text" id = "myInput">
<button onclick = "myFunction()">Copy Code</button>
Это
.innerHTML.