CODEWITHSUNDEEP
javascripthtml
Savior
Savior

Reputation: 29

copy button for input field and add URL automatic when its coped

i have input field and copy button, visitors can write their phone number inside the input (ex: +123456789) and then click copy button to copy the numbers.

i want the visitor when click copy and past it anywhere it should be with URL example.com/123456789 so the URL add automatically and without (+) mark.

i have this code but it does not work as i expect and i tried to modified still not work.

<input type="text" id="phonenumber">

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

<script>
function myFunction() {
  var copyText = document.getElementById("phonenumber");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied";
}

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

i've tried to do it like this var copyText = document.getElementById("example.com/","phonenumber"); But its not working, i add extra var but still not working

Upvotes: 0

Views: 374

Answers (1)

Preet Sojitra
Preet Sojitra

Reputation: 136

Here's the working example of the code:

Codepen link (click to view live example)

Used string.substring(1) to remove the first character from the input text. Then simply added it to clipboard by appending example.com to it while writing it to clipboard

Upvotes: 1

Related Questions