Content.select() не работает с элементом <code>

Я пытаюсь сделать кнопку для выбора содержимого элемента <code>. Однако это не работает, и я получаю «content.select() не функция

<body>
<div>
    <button type = "button" id = "copyButton" class = "btn btn-primary" onclick = "copyConfig()">Copy Config</button>
    <br><br>
    <pre><code id = "contentCfg">{{ content }}</code></pre>
</div>
</body>
<script>
    function copyConfig() {
        const content = document.getElementById("contentCfg").textContent;
        content.select();
        content.setSelectionRange(0, 99999);
        document.execCommand("copy");
    }
</script>

Понятия не имею, почему это не сработает, {{ content }} автоматически заполняется текстом моим шаблоном serve.r

textContent — это значение string, а не HTMLElement.

— 26.12.2020 01:02

javascript html

26.12.2020 00:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

140

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Закончилось исправлением, изменив js на это (добавлены части elem)

function copyConfig() {
        const content = document.getElementById("contentCfg").textContent;
        const elem = document.createElement("textarea");
        document.body.appendChild(elem)
        elem.value = content;
        elem.select();
        elem.setSelectionRange(0, 99999);
        document.execCommand("copy");
        document.body.removeChild(elem);
    }

Вы ответили на свой вопрос менее чем за 10 минут? Браво.

— 26.12.2020 01:08

26.12.2020 01:06

Ответ принят как подходящий

На самом деле вы можете решить эту проблему, используя Document.createRange() , Range.selectNodeContents() и Window.getSelection(), таким образом избегая ненужных манипуляций с DOM.

См. пример на MDN или обсуждение в этом вопросе: Выделение текста в элементе (аналогично выделению мышью)

function copyConfig() {
  const contentNode = document.getElementById("contentCfg")

  const range = document.createRange();
  range.selectNodeContents(contentNode);
  
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  document.execCommand("copy");
}

const copyButton = document.getElementById('copyButton');
copyButton.addEventListener('click', copyConfig);

<div>
    <button type = "button" id = "copyButton" class = "btn btn-primary">Copy Config</button>
    <br><br>
    <pre><code id = "contentCfg">{{ content }}</code></pre>
</div>

26.12.2020 01:54

Другие вопросы по теме

Как я могу вызвать значение кнопки, которое находится на другой странице?

Получение встроенного видео для iphone / мобильного телефона

Как добавить полосу прокрутки для реагирования на проект?

Все document.getElementById('') возвращают null

Проблема с регулярным выражением в нескольких строках

Страницы Github показывают пустую страницу

Удобное поведение ссылок без mod_rewrite

Я хочу скрыть все элементы div, у которых есть href и какая-то специальная структура, а не все div

Извлечь таблицу HTML, написанную с использованием неупорядоченного списка, в листы Google

Как внедрить PHP Parser в .html() jQuery для ввода текста в режиме реального времени

Content.select() не работает с элементом <code>

Ответы 2

Другие вопросы по теме

Похожие вопросы