Самый простой способ копирования текста в буфер обмена при нажатии кнопки — с помощью JavaScript

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

Вы можете использовать его для создания кнопки Copy to Clipboard на вашем сайте или приложении на javascript.

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

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

Для простоты и скорости мы не будем использовать стили и наш javascript будет находиться в одном файле.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body>
<h1>Simple example of copy text to clipboard using Javascript </h1>
<input placeholder="Type text" id="textInput">
<button>Save This</button>
<p id="savedText"></p>
<button>Copy This</button>

<script>
</script>
</body>

</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Мы намеренно оставили тег Script пустым. Именно в нем будет написан наш javascript.

Сейчас мы напишем первый код Javascript внутри тега script, который будет захватывать текст, введенный в поле ввода текста (id = «textInput») и отображать его внутри параграфа с id «savedText», который сейчас пуст.

Далее мы добавим вызов функции onClick к кнопке «Сохранить» в нашем html.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body>
<h1>Simple example of copy text to clipboard using Javascript </h1>
<input placeholder="Type text" id="textInput">
<button onClick="saveText()" >Save This</button>
<p id="savedText"></p>
<button>Copy This</button>


<script>

function saveText(){
document.getElementById("savedText").innerText = document.getElementById("textInput").value
}
</script>
</body>

</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы запустите эту функцию в браузере, то увидите, что когда вы сделаете ввод и нажмете на кнопку «Сохранить», набранный вами текст будет отображен под кнопкой сохранения.

Кнопка сохранения вызывает функцию «SaveText()». Она берет значение (т.е. содержимое) поля ввода текста и использует его для замены того, что находится во внутреннем тексте параграфа на id=»savedText», будь то пустое место или другой текст.

Я знаю, что вы, возможно, уже знаете все это, но мне нужно сделать это как можно проще даже для абсолютного новичка😉.

Далее, мы создаем функцию, которая фактически выполняет копирование в буфер обмена на Javascript. Вы можете поместить ее под первой функцией внутри тега script:

 const copyToClipboard = (text) => {
            navigator.clipboard.writeText(text)
        }
Войти в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, что мы задали ей параметр «text». Он будет заменен переменной (аргументом), значением которой будет текст, сохраненный в нашем параграфе «savedText».

Далее создадим функцию, которая будет вызываться при нажатии на кнопку «Копировать». Назовем эту функцию «copy». Запишите ее под предыдущей функцией.

 function copy() {
            const textToCopy = document.getElementById("savedText").innerText;
            copyToClipboard(textToCopy)
            console.log(textToCopy)
        }
Вход в полноэкранный режим Выйти из полноэкранного режима

Выше: внутри функции мы сначала создали переменную «textToCopy» и сделали ее значением текст, который мы берем из параграфа «savedText».
Затем мы используем «textToCopy» в качестве аргумента при вызове нашей предыдущей функции: *copyToClipboard*. Если вы новичок, это называется вызовом функции внутри другой функции.

Наконец, мы вернемся к нашей кнопке «Copy this» в html и заставим ее вызывать функцию copy() при каждом нажатии.

<button onClick="copy()"> Copy This </button>
Вход в полноэкранный режим Выход из полноэкранного режима

Собираем все вместе,

Мы получим вот такой полный код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy To Clipboard</title>
</head>

<body>
    <h1>Simple example of copy text to clipboard using Javascript </h1>
    <input placeholder="Type text" id="textInput">
    <button onClick="saveText()">Save This</button>
    <p id="savedText"></p>
    <button onClick="copy()"> Copy This</button>


    <script>

        function saveText() {
            document.getElementById("savedText").innerText = document.getElementById("textInput").value
        }

        const copyToClipboard = (text) => {
            navigator.clipboard.writeText(text)
        }

        function copy() {
            const textToCopy = document.getElementById("savedText").innerText;
            copyToClipboard(textToCopy)
            alert("Text copied to clipboard")
        }

    </script>
</body>

</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Надеюсь, это кому-нибудь поможет. Вы можете следить за мной на Twitter или BuyMeACoffee

Оцените статью
Procodings.ru
Добавить комментарий