Question 205461 in CSS Question posted in
Some basic documentation can be found here.

Css – Copy to clipboard from a paragraph or button (no input fields)

I’m looking a a simple solution:

  • I just have a text (it can be a button without borders or paragraph or span, but no input field)
  • I want to be able to just click on text and to be copied to clipboard (in all common web browsers)
  • without any additional buttons
  • after clicking display a tooltip.

Just like that:
enter image description here

I saw many articles but based on input field.
I also tried to use this code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2
It looks very nice with tooltip but there is the additional button and it is based on input field.

How to do this, using only one text field (it can be a button without borders or paragraph or span, but no input field) ?

Tags:

3

Answers


  1. 0

    Try the following Code:

    <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<button onclick="myFunction()" id="myInput" value="Copied text">Copy text</button>

<script>
function myFunction() {
  // Get the text field
  var copyText = document.getElementById("myInput");

  // Copy the text inside the text field
  navigator.clipboard.writeText(copyText.value);
  
  // Alert the copied text
  alert("Copied the text: " + copyText.value);
}
</script>

    Using a button we’re calling our function myFunction once the button is clicked. In our function we copy the value we gave our button, in this case "Copied text" and alert the user, that the text was copied.

    Login or Signup to reply.
  2. 0

    The main reason why you’ve struggled to follow this is becuase of the first few lines in the code (which is specific to input tags).
    But you can adapt the remaining code like so:
    (Adapted from the W3 Link

    I believe the bit that causes you some issue is

      copyText.select();
  copyText.setSelectionRange(0, 99999);

    Which I believe is to help some mobile browsers to grab the value from the input, but since you want a different element type (in my example: <p>...</p>), I don’t believe it is needed…

    In the below snippet:

    • I targeted #myTarget
    • Copied the innerText
      • You could always use different properties if needed, such as innerHTML
      • MDN Documentaion
    • Outputted the content of the text to show to the user
    function myFunction() {
  var copyText = document.getElementById("myTarget");

  navigator.clipboard.writeText(copyText.innerText);

  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.innerText;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
    .tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
    <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

  <p id="myTarget">The world says hello</p>

  <div class="tooltip">
    <button onclick="myFunction()" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
  Copy text
  </button>
  </div>

</body>

</html>
    Login or Signup to reply.
  3. 0

    You can assign both listeners to a normal element, it doesn’t need to be a button.
    Starting from the w3schools example:

    <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="tooltip">
  <span id="myText" onclick="myFunction()" onmouseout="outFunc()">
    <span>Text to copy</span>
    <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
  </span>
</div>
</body>
</html>

    function myFunction() {
  var copyText = document.getElementById("myText");
  navigator.clipboard.writeText(copyText.firstElementChild.innerText);
  
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.firstElementChild.innerText;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}

    body{
  padding: 100px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

    See codepen preview

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search