How to implement the function of clicking a button to copy text in JavaScript?-JS Tutorial-php.cn

How to implement the function of clicking a button to copy text in JavaScript?

WBOY

Release： 2023-10-20 18:31:41

Original

1707 people have browsed it

JavaScript 如何实现点击按钮复制文本功能？

JavaScript How to implement the function of clicking a button to copy text?

In modern network applications, we often encounter situations where we need to copy text, such as copying sharing links, copying discount codes, etc. JavaScript provides a simple and powerful way to achieve this function, that is, by listening to the click event of the button and calling the clipboard API provided by the browser to copy the text.

First, we need an HTML file to implement buttons and text boxes. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮复制文本</title>
</head>
<body>
    <input type="text" id="textToCopy" value="待复制的文本">
    <button id="copyButton">复制文本</button>
    <script src="script.js"></script>
</body>
</html>

Copy after login

In the above code, we created a text box and a button, and set an ID for each of them for subsequent operations.

Next, we need to write the logic code to copy the text in the JavaScript file. Create a script.js file and add the following code:

window.onload = function() {
    var copyButton = document.getElementById("copyButton");
    copyButton.addEventListener("click", function() {
        var textToCopy = document.getElementById("textToCopy");
        textToCopy.select();
        document.execCommand("copy");
        alert("已复制文本：" + textToCopy.value);
    });
};

Copy after login

In the above code, we obtained the references to the button and text box through the getElementById method. , and then use the addEventListener method to listen to the click event of the button. In the callback function of the click event, we first obtain the reference to the text to be copied through the getElementById method, then call the select method to select the text content of the text box, and then use document.execCommand("copy") command to perform the copy operation, and finally a prompt box will pop up to display the copied text.

In order to ensure that the JavaScript code is executed after the page is loaded, we used the window.onload method in the above code. In this way, when the page is loaded, the JavaScript code will be executed.

Now, we can open the HTML file in the browser and try to click the button and then paste it elsewhere to see that the copied text is successfully delivered.

The above is a specific code example using JavaScript to implement the function of clicking a button to copy text. By listening to the click event of the button, selecting the text box, and calling the clipboard API provided by the browser, we can easily implement the text copy function, allowing users to share and copy content more conveniently.

The above is the detailed content of How to implement the function of clicking a button to copy text in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!