Создать кнопку для ввода текста, сохранить и скопировать, чтобы вставить на другую платформу

Question

Я работаю в чате поддержки со знанием HTML5 / CSS3 и немного JS.Я хотел бы код, где я могу ввести один скрипт на отдельной кнопке.Например, «Как я могу вам помочь?»или «Спасибо, что связались с нами». Эта кнопка сохраняет и копирует скрипт, чтобы я мог вставить его в качестве ответа при нажатии на него.Таким образом, я могу легко выбирать из нескольких кнопок в зависимости от категории запроса.Я могу сэкономить время, набирая длинные ответы на глупые повторяющиеся вопросы.

Вот пример того, что я сделал,

<td colspan="1"><div id = "chat">
<button onclick="copy('Are you still there?')">Still there?</button>
<button onclick="copy('One moment please')">1moment</button></div>

Answer 1

Я тоже этого не знал, но в Хакерский полдень

Ваша функция копирования выглядела бы так.Функция exceCommand ('copy') копирует «выделение» из документа HTML.Итак, сначала мы создаем элемент textarea подделки со строкой, которую вы хотите скопировать внутри него.Затем мы выполняем команду для копирования выбранной строки в буфер обмена.После этого элемент фальсификации уничтожается.Эта функция также добавляет атрибуты CSS, чтобы удостовериться, что на визуальный эффект пользователя это не влияет.

  const copy = str => {
      const el = document.createElement('textarea');  // Create a <textarea> element
      el.value = str;                                 // Set its value to the string that you want copied
      el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
      el.style.position = 'absolute';                 
      el.style.left = '-9999px';                      // Move outside the screen to make it invisible
      document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
      const selected =            
        document.getSelection().rangeCount > 0        // Check if there is any content selected previously
          ? document.getSelection().getRangeAt(0)     // Store selection if found
          : false;                                    // Mark as false to know no selection existed before
      el.select();                                    // Select the <textarea> content
      document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
      document.body.removeChild(el);                  // Remove the <textarea> element
      if (selected) {                                 // If a selection existed before copying
        document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
        document.getSelection().addRange(selected);   // Restore the original selection
      }
    };