Hi Everyone,
Hope you’ll well!
I like to share how I added Copy Text feature to my app using Better Web view component that Pragmaflow created!
See it here in action ( Clonable too ):
Here’s the code that I have added inside the component :
Copied from here and I edited a bit.
<!DOCTYPE html>
<html>
<head>
<style>
button
{
height:0px;
width:110px;
border-radius:8px;
padding:0px;
font-size:20px;
font-family: 'Oswald', sans-serif;
height:34px;
cursor:pointer;
background-color:wheat;
}
p {
display:none
}
</style>
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<p id="p1">name</p>
<button onclick="copyToClipboard('#p1')">Copy</button>
</center>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
</body>
</html>
In here replace the name with the magic text!
And don’t paste this code directly to the component. When you’ll try to paste the code you’ll will see a text that say encode from here. Click Here and you’ll will go to a site and you’ll can add this code there. Then press Encode and you’ll will get the encoded result. Then copy that result and paste it in the component and find the place where the name is located in the encoded result ( you’ll can give it a short name to find it easier. Like Na ) and replace there with magic text.
After encoding ( added the encoded result too, if you’ll doesn’t need to encode ) :
%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cstyle%3E%0Abutton%0A%7B%0A%20%20height%3A0px%3B%0A%20%20width%3A110px%3B%0A%20%20border-radius%3A8px%3B%0A%20%20padding%3A0px%3B%0A%20%20font-size%3A20px%3B%0A%20%20font-family%3A%20%27Oswald%27%2C%20sans-serif%3B%0A%20%20height%3A34px%3B%0A%20%20cursor%3Apointer%3B%0A%20%20background-color%3Awheat%3B%0A%7D%0Ap%20%7B%0A%20%20display%3Anone%0A%7D%0A%0A%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Clink%20href%3D%27https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DOswald%27%20rel%3D%27stylesheet%27%20type%3D%27text%2Fcss%27%3E%20%0A%0A%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%0A%3Ccenter%3E%0A%0A%3Cp%20id%3D%22p1%22%3Ena%3C%2Fp%3E%0A%0A%3Cbutton%20onclick%3D%22copyToClipboard(%27%23p1%27)%22%3ECopy%3C%2Fbutton%3E%0A%0A%3C%2Fcenter%3E%0A%0A%3Cscript%3E%0Afunction%20copyToClipboard(element)%20%7B%0A%20%20var%20%24temp%20%3D%20%24(%22%3Cinput%3E%22)%3B%0A%20%20%24(%22body%22).append(%24temp)%3B%0A%20%20%24temp.val(%24(element).text()).select()%3B%0A%20%20document.execCommand(%22copy%22)%3B%0A%20%20%24temp.remove()%3B%0A%7D%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E
In here replace the na with magic text! ( You can find it on here in the encoded result : 3D%22p1%22%3Ena%3C% )
Just adding another three examples that you can use this component : Some Tips and Tricks by this Semi Noob! 😅 ( In here Tip 19 , 20 and 21 )
Hope this will work greatly!
Thank you!
Have a great weekend!