This article describes how to use JavaScript to realize the function of clicking a button to copy the text content in different input boxes to the clipboard. The text value of a specified element can be easily copied to the user's clipboard via the navigator.clipboard.writeText() method. This article will provide detailed code examples and usage instructions to help developers quickly implement this function.

Implementation principle

The core idea is:

1. HTML structure: Create hidden elements, each containing the text to be copied and assigned a unique id. Create buttons at the same time, bind an onclick event to each button, call the JavaScript function and pass the corresponding id.
2. JavaScript function: This function receives id as a parameter and obtains the corresponding element through document.getElementById(). Then, use the navigator.clipboard.writeText() method to copy the element's value to the clipboard.

Code implementation

Here is a complete code example:

 


<title>Copy Text to Clipboard</title>



<div hidden>
  <input type="text" value="Text for Button 1" id="button1">
  <input type="text" value="Different Text for Button 2" id="button2">
  <input type="text" value="Different Text for each Button" id="button3">
</div>

<button onclick="copyToClipboard('button1')">Copy Text 1</button>
<button onclick="copyToClipboard('button2')">Copy Text 2</button>
<button onclick="copyToClipboard('button3')">Copy Text 3</button>

<script>
function copyToClipboard(id) {
  var copyText = document.getElementById(id);
  if (copyText) {
    copyText.select(); // Select the text in the input box copyText.setSelectionRange(0, 99999); // For mobile devices

    navigator.clipboard.writeText(copyText.value)
      .then(() => {
        console.log(&#39;Text copied to clipboard&#39;);
        // Optional: add success prompt})
      .catch(err => {
        console.error(&#39;Failed to copy text: &#39;, err);
        // Optional: add failure prompt});
  } else {
    console.error(&#39;Element with id "&#39; id &#39;" not found.&#39;);
  }
}
</script>

Code explanation:

• HTML part:
  • The hidden attribute is used to hide the element so that it does not appear on the page.
  • The onclick event of each element calls the copyToClipboard() function, passing the id of the corresponding element.
• JavaScript part:
  • The copyToClipboard(id) function receives id as parameter.
  • document.getElementById(id) Gets the element with the specified id.
  • copyText.select() selects the text of the input box. copyText.setSelectionRange(0, 99999) is compatible with mobile devices.
  • navigator.clipboard.writeText(copyText.value) Copies the selected text to the clipboard.
  • .then() and .catch() are used to handle success and failure conditions of the copy operation.

Things to note

1. Security policy: The navigator.clipboard.writeText() method needs to be used under the security context (HTTPS). You may encounter permission issues if used in a non-secure context.
2. User Permissions: Some browsers may require the user to grant clipboard access permission to function properly.
3. Error handling: It is recommended to add an error handling mechanism to provide prompts when replication fails, such as using the try...catch statement or the .catch() method of Promise.
4. User experience: After the copy is successful, you can add some visual feedback, such as displaying a prompt message telling the user that the text has been successfully copied to the clipboard.
5. select() method: The select() method only works on and elements. If you need to copy the content of other types of elements (such as <div> or <p>), you can use the document.getSelection() and document.createRange() methods.</p> <li> <strong>Mobile compatibility:</strong> Add copyText.setSelectionRange(0, 99999) to be compatible with mobile devices and used to select text in the input box.</li> <h3 id="Summarize"> Summarize</h3> <p> Through the above method, you can easily realize the function of clicking the button to copy the text content in different input boxes to the clipboard. This method is simple and easy to understand and suitable for various Web application scenarios. Developers can modify and expand according to actual needs, such as adding error handling, user feedback and other functions to improve user experience.</p> </div>

The above is the detailed content of Function implementation for copying values ??from different input boxes to the clipboard. For more information, please follow other related articles on the PHP Chinese website!